如何使用javascript动态获取输入值并执行算术运算_Javascript_Html_Jsp

如何使用javascript动态获取输入值并执行算术运算

javascript html jsp

如何使用javascript动态获取输入值并执行算术运算,javascript,html,jsp,Javascript,Html,Jsp,我创建了两个输入文本字段，用户必须通过这些字段给出两个值。使用javascript，我需要让这些值根据选中的复选框执行加法、减法、乘法和除法。怎么做这是我的密码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JS Assignment</t

我创建了两个输入文本字段，用户必须通过这些字段给出两个值。使用javascript，我需要让这些值根据选中的复选框执行加法、减法、乘法和除法。怎么做

这是我的密码

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


JS分配
函数changeCheckBox（）{
试一试{
var max=document.myform.check.length；
var计数=0；
对于（变量i=0；i0）{
返回false；
}
}捕获（e）{
警报（e.message）；
}
}
函数arith（）
{  
var number1=document.getElementById（'num1'）。值；
var number2=document.getElementById（'num2'）。值；
x=num1+num2；
var demo=document.getElementById（“演示”）
demo.innerHTML=“x=”+x；
}         
简单的JavaScript算术运算
值1


值2


添加

减法

乘法

分部

尝试将HTML的值发送到函数中，然后将其用作if语句检查（或switch语句）

啊，对不起，我忘了您必须将值转换为整数（或者可能是双倍，取决于您的精度？）。在2秒钟内检查我的编辑要进行一些调试，什么是

op

日志记录？那么

num1

和

num2

呢？请在调试器中签入，调试器显示“没有要显示的变量，因为没有当前线程。”

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

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;
}