簡體   English   中英

如何使用JavaScript動態獲取輸入值並執行算術運算

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

我創建了兩個輸入文本字段,用戶必須通過它們輸入兩個值。 使用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;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM