lundi 1 juin 2020

My javascript function for clearing a form text input field is not working

Even though a lot of work is left, the basic calculator is done, everything is working just fine except the clear function. I can not get it to clear the viewer. need immediate help please.

(i put everything in one file so it is easy for everyone to understand the full thing)

Please avoid the styling tho.

So basically i made this extremely simple calculator with the function clear() Any ideas on how i can make this function in order to clear the viewer?

<!DOCTYPE html>
<html>


<head>


<script>
  function insert(num) {
    document.view.viewer.value = document.view.viewer.value+num
  }
  function equal() {
    document.view.viewer.value = eval(document.view.viewer.value);
  }
  function clear() {
    document.view.viewer.value = "";
  }
</script>


<style>
body {
  background-image: url("peepee.png"); 
}
*{
  margin: 0px;
  padding: 0px;
}
.button {
  height:100px;
  width:100px;
  background-color:grey;
  text-align:center;
  margin:2px;
  font-size: 50px;
  cursor: pointer;
  border: 0px;
}
.clear {
  height:100px;
  width:400px;
  background-color: red;
  text-align:center;
  margin:2px;
  font-size: 50px;
  cursor: pointer;
  border: 0px;  
}
.viewer {
  height: 100px;
  width: 430px;
  font-size: 50px;
  margin: 2px
}
</style>


</head>


<body>
  <div class= "main">
    <form name= "view">
      <input class="viewer" name= "viewer">
    </form>
    <table>
      <tr>
        <td><input class="button" value="7" onclick= "insert(7)"></td>
        <td><input class="button" value="8" onclick= "insert(8)"></td>
        <td><input class="button" value="9" onclick= "insert(9)"></td>
        <td><input class="button" value="-" onclick= "insert('/')"></td>
      </tr>
      <tr>
        <td><input class="button" value="4" onclick= "insert(4)"></td>
        <td><input class="button" value="5" onclick= "insert(5)"></td>
        <td><input class="button" value="6" onclick= "insert(6)"></td>
        <td><input class="button" value="x" onclick= "insert('*')"></td>
      </tr>
      <tr>
        <td><input class="button" value="1" onclick= "insert(1)"></td>
        <td><input class="button" value="2" onclick= "insert(2)"></td>
        <td><input class="button" value="3" onclick= "insert(3)"></td>
        <td><input class="button" value="-" onclick= "insert('-')"></td>
      </tr>
      <tr>
        <td><input class="button" value="0" onclick= "insert(0)"></td>
        <td><input class="button" value="." onclick= "insert('.')"></td>
        <td><input class="button" value="=" onclick= "equal()"></td>
        <td><input class="button" value="+" onclick= "insert('+')"></td>
      </tr>
    </table>
    <table>
      <tr>
        <td><input class= "clear" value="Clear" onclick= "clear()"></td>
      </tr>
    </table>
  </div>
</body>


</html>



Aucun commentaire:

Enregistrer un commentaire