Как получить входное значение динамически и выполнять арифметические операции с использованием JavaScript

0

Я создал два входных текстовых поля, по которым пользователь должен дать два значения. Используя 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>
Теги:
jsp

1 ответ

1

Попробуйте отправить значение 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;
}
  • 0
    Спасибо за ваш ответ .. Он показывает x = undefined после запуска этой программы ..
  • 0
    Извините, я забыл, что вы должны конвертировать значения в целые числа (или, может быть, удваивает в зависимости от вашей точности?). Проверьте мою правку за 2 секунды
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню