How to get an input value dynamically and perform arithmetic operations using javascript

Question

I have created two input text fields by which the user have to give two values. Using javascript, I need to get those values perform addition, subtraction, multiplication and division based on the checkbox checked. How to do that?

Here is my code..

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>JS Assignment</title>
            <script>
            function changeCheckBox() {
         try {

             var max = document.myform.check.length;
             var count = 0;

             for (var i = 0; i < max; i++) {
                 if (document.myform.check[i].checked == true) {
                     count++;
                     serNoChecked = i;
                 }
             }
             if (count == 1) {
                 for (var i = 0; i < max; i++) {
                     if (document.myform.check[i].checked == false) {
                         document.myform.check[i].disabled = true;
                     }
                 }
             } else if (count == 0) {
                 for (var i = 0; i < max; i++) {
                     document.myform.check[i].disabled = false;
                 }
             }

             if (null == max) return false;
             if (count == 0) {
                 return true;
             } else if (count > 0) {
                 return false;
             }

         } catch (e) {
             alert(e.message);
         }
     }
</script>
     <script type="text/javascript">
                function arith()
                {  
                var number1 = document.getElementById('num1').value;
                var number2 = document.getElementById('num2').value;   
                x=num1 + num2;
                var demoP=document.getElementById("demo")
                demoP.innerHTML="x=" + x;
                }         
    </script>
        </head>
        <body background="photo.jpg" onload="arith()">
            <h3>Simple JavaScript Arithmetic Operations</h3>
            <form name="myform" method="get">
            Value 1 <input type ="text" id="num1"> <br><br>
            Value 2 <input type="text" id="num2"> <br><br>
            <input type="checkbox" name="check" value="check1" id="check1" onclick="changeCheckBox()">Addition<br>
            <input type="checkbox" name="check" value="check2" id="check2" onclick="changeCheckBox()">Subtraction<br>
            <input type="checkbox" name="check" value="check3" id="check3" onclick="changeCheckBox()">Multiplication<br>
            <input type="checkbox" name="check" value="check4" id="check4" onclick="changeCheckBox()">Division<br><br>
            <input type="submit" value="Submit">
            </form>
            <p id="demo"></p>  
        </body>
    </html>

Sterling Archer · Accepted Answer · 2013-12-16 06:38:42Z

1

Try sending the value of the HTML into the function, and then use those as an if statement check (or switch statement).

<form name="myform" method="get">
Value 1 <input type ="text" id="num1"> <br><br>
Value 2 <input type="text" id="num2"> <br><br>

<input type="checkbox" name="check" id="check1">Addition<br>
<input type="checkbox" name="check" id="check2">Subtraction<br>
<input type="checkbox" name="check" id="check3">Multiplication <br>
<input type="checkbox" name="check" id="check4">Division<br><br>
<input type="submit" value="Submit">
<p id="demo"></p>

Notice the value attributes now have unique value. And you're sending that into the function as a parameter.

Now just have a function that returns what you want

var newVal = "Unset";
var plus = document.getElementById("check1");
var minus = document.getElementById("check2");
var times = document.getElementById("check3");
var divide = document.getElementById("check4");
var demoP=document.getElementById("demo");

plus.onclick = function() {
    var n1 = parseFloat(document.getElementById('num1').value);
    var n2 = parseFloat(document.getElementById('num2').value);
    newVal = n1+n2;
    demoP.innerHTML="x=" + newVal;
}
minus.onclick = function() {
    var n1 = parseFloat(document.getElementById('num1').value);
    var n2 = parseFloat(document.getElementById('num2').value);
    newVal = n1-n2;
    demoP.innerHTML="x=" + newVal;
}
times.onclick = function() {
    var n1 = parseFloat(document.getElementById('num1').value);
    var n2 = parseFloat(document.getElementById('num2').value);
    newVal = n1*n2;
    demoP.innerHTML="x=" + newVal;
}
divide.onclick = function() {
    var n1 = parseFloat(document.getElementById('num1').value);
    var n2 = parseFloat(document.getElementById('num2').value);
    newVal = n1/n2;
    demoP.innerHTML="x=" + newVal;
}

edited Dec 16, 2013 at 6:38

answered Dec 16, 2013 at 5:45

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sterling Archer Over a year ago

Ah sorry, I forgot you have to convert the values to integers (or maybe doubles depending your precision?). Check my edit in 2 seconds

Sterling Archer Over a year ago

Do some debugging, what is op logging? What about num1 and num2?

Dinesh Kumar Over a year ago

Please check in jsfiddle.net/L9LKc In Debugger, it is showing "No variables to display because there is no current thread."

Collectives™ on Stack Overflow

How to get an input value dynamically and perform arithmetic operations using javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related