带 Switch 的简单 JavaScript 计算器

Question

I need some help with a simple calculator I am doing with javascript.

The js code is as follows (my teacher want's me to use 4 functions, for each kind of operation):

<script>

            function plus(a,b) {
                return (a + b);
            }

            function minus(a,b) {
                return (a - b);
            }

            function multiply(a,b) {
                return (a * b);
            }

            function divide(a,b) {
                return (a / b);
            }

            function calc() {

                var x = document.getElementById("oper1").value;
                var y = document.getElementById("operx").value;
                var z = document.getElementById("oper2").value;
                var w = document.getElementById("resul").value;

                switch (y) {
                    case '0':
                        w = plus(x, z);
                        break;

                    case '1':
                        w = minus(x, z);
                        break;

                    case '2':
                        w = multiply(x, z);
                        break;

                    case '3':
                        w = divide(x, z);
                        break;

                    default:
                        w = "Don't really know..";
                }

            }

</script>
<input type="text" id="oper1" value="">

<select id="operx">
    <option value="0">SUMAR</option>
    <option value="1">RESTAR</option>
    <option value="2">MULTIPLICAR</option>
    <option value="3">DIVIDIR</option>
</select>

<input type="text" id="oper2" value="">
<input type="button" onClick="calc();" value="=">
<input type="text" id="resul" value="">

My code isn't working, in fact is not responding anything and I don't see any errors so I can debug... could anyone tell me if you see my mistake here? I've tried hundreds of combinations but without having an debug console or something.

Answer 1

var w = document.getElementById("resul").value;

This does not allow you to set W and then have the <input/> update itself. You could do one of the following instead.

After setting w do document.getElementById("resul").value=w;

OR

var w = document.getElementById("resul");
w.value=etc.

Also, bonus points if you validate your form (nice function for this case is IsNumeric() )

Answer 2

JavaScript does not use pointers in the way you intend to use them. You have to explicitly write back your result to the output field:

function calc(){
  // most of your stuff
  // just replace the var w = document ... line with just
  var w;

  // your other code

  document.getElementById("resul").value = w;
}

Furthermore, you should parse the input values into a number using either parseInt() or parseFloat() . If you don't JavaScript will treat the input values as strings and then interprets + as string concatenation, for example.

Example Fiddle

Answer 3

 // You can simply add button to call a function like this

 <button onclick="Calculator()">=</button>

functon Calculator(){
 var x = document.getElementById("oper1").value;
 var y = document.getElementById("operx").value;
 var z = document.getElementById("oper2").value;
           
switch(y){
case "+":
document.getElementById("resul") = x + z;
break;
case "-":
document.getElementById("resul") = x - z;
break;

case "*":
document.getElementById("resul") = x * z;
break;

case "/":
document.getElementById("resul") = x / z;
break;

case "%":
document.getElementById("resul") = x % z;
break;

Default:
alert("Choose the operator");

}
}

Answer 4

Your program should look like this

 <script> function plus(a,b) { return (a + b); } function minus(a,b) { return (a - b); } function multiply(a,b) { return (a * b); } function divide(a,b) { return (a / b); } function calc() { var w; var x = document.getElementById("oper1").value; var y = document.getElementById("operx").value; var z = document.getElementById("oper2").value; //document.getElementById("resul").innerHTML=w; switch (y) { case '0': w = plus(x, z); document.getElementById("resul").innerHTML=w; break; case '1': w = minus(x, z); document.getElementById("resul").innerHTML=w; break; case '2': w = multiply(x, z); document.getElementById("resul").innerHTML=w; break; case '3': w = divide(x, z); document.getElementById("resul").innerHTML=w; break; default: w = "Don't really know.."; } } </script> <input type="text" id="oper1" value=""> <select id="operx"> <option value="0">SUMAR</option> <option value="1">RESTAR</option> <option value="2">MULTIPLICAR</option> <option value="3">DIVIDIR</option> </select> <input type="text" id="oper2" value=""> <input type="button" onClick="calc();" value="Solve"><br/><br/> <p id="resul">The answer is : </p>