html - Simple javascript calculator with Switch - Stack Overflow

admin管理员组

文章数量:1305431

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 binations but without having an debug console or something.

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 binations but without having an debug console or something.

• javascript
• html
• calculator

Share Improve this question Follow edited May 7, 2013 at 15:20 MMM 7,31022 gold badges2626 silver badges4242 bronze badges asked May 7, 2013 at 15:18 MoeSzislakMoeSzislak 13711 gold badge44 silver badges1313 bronze badges 2

• Can you put a break point in your function and see if it's getting called at all? – Shaded Commented May 7, 2013 at 15:19
• Switch statements can be tricky. They pare values using the === operator, which may be replaced with an if/elsif statement to use == instead. Try this for example: switch(1){ case '1': 'success'; break; default: 'fail'; }, then this switch(1){ case 1: 'success'; break; default: 'fail'; } – George Commented May 7, 2013 at 15:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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())

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

 // 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");

}
}

本文标签： htmlSimple javascript calculator with SwitchStack Overflow