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

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

本文关键字：javascript 算术运算执行输入何动态动态获取更新时间：2023-09-26

我创建了两个输入文本字段，用户必须通过它们给出两个值。使用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>

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

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

请注意，value属性现在具有唯一值。你把它作为一个参数发送到函数中。

现在只需要一个函数来返回您想要的

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