javascript - 在检查哪个按钮被选中并从字段中获取值后返回一个值

Question

我对 JavaScript 相当陌生，并且在分配作业时遇到了麻烦。我需要从 2 个文本字段中获取用户输入，然后对它们进行加、减、乘或除，然后显示答案。我也不确定如何显示答案，我一直试图让它出现在段落中，但我似乎无法让它发挥作用。提前致谢！

JavaScript

<script>
    var number=new Object();
    number.Num1="";
    number.Num2="";
            function processData(Num1,Num2) {

        // get all the fields' values
        number.Num1 = document.getElementById(Num1).value;
        number.Num2 = document.getElementById(Num2).value;

        //Check which radio button is checked
         if (document.getElementById('Add').checked) 

         //Shoot out answer
return Num1+Num2;
        //Write answer
document.getElementById("Answer").innerHTML=processData(Num1,Num2)

            }
</script>

HTML 表单

<table><tr>
<td height="600" align="center"><form id="form1" name="form1" method="post" action="">
  <p>Input the two numbers that you wish to calculate!</p>
  <p>
    <label>First Number!
      <input type="text" name="Num1" id="Num1" />
    </label>
  </p>
  <p>
    <label>Second Number!
      <input type="text" name="Num2" id="Num2" />
    </label>
  </p>
  <p>Please choose what you wish to do with the numbers!</p>
  <p>
    <label>
      <input type="radio" name="Add" value="Add" id="Add" />
      Add</label>
    <br />
    <label>
      <input type="radio" name="Multiply" value="Multiply" id="Multiply" />
      Multiply</label>
    <br />
    <label>
      <input type="radio" name="Substract" value="Substract" id="Substract" />
      Substract</label>
    <br />
    <label>
      <input type="radio" name="Divide" value="Divide" id="Divide" />
      Divide</label>
  </p>
  <p>Click Submit to get your answer!</p>
  <p>
    <label>Click me!
       <input type="submit" name="Button" id="Button" value="Submit" onclick="processData('Num1','Num2')" />
    </label>
  </p>
  <p>Your answer is : </p> <p id="Answer"> </p><br />

</form></td>
</tr>
</table>

Answer 1

首先为您的单选按钮提供相同的名称，因此它表示一组确保只检查一个单选按钮。让我们对“操作”说吧

<p>
<label>
  <input type="radio" name="Operation" value="Add" id="Add" />
  Add</label>
<br />
<label>
  <input type="radio" name="Operation" value="Multiply" id="Multiply" />
  Multiply</label>
<br />
<label>
  <input type="radio" name="Operation" value="Substract" id="Substract" />
  Substract</label>
<br />
<label>
  <input type="radio" name="Operation" value="Divide" id="Divide" />
  Divide</label>
</p>

现在将您的 js 代码更改为

var number=new Object();
number.Num1= 0;
number.Num2= 0;

function processData(Num1,Num2) {

    // get all the fields' values
    // parse your fields value to number
    number.Num1 = Number(document.getElementById(Num1).value);
    number.Num2 = Number(document.getElementById(Num2).value);

    // a variable to hold the answer
    var answer = 0; 

    //Check which radio button is checked
    if (document.getElementById('Add').checked) {
        answer = number.Num1 + number.Num2;
    } else if (document.getElementById('Multiply').checked) {
        answer = number.Num1 * number.Num2;
    } else if (document.getElementById('Subtract').checked) {
        answer = number.Num1 - number.Num2;
    } else if (document.getElementById('Divide').checked) {
        // if number.Num2 =0 then it will product Divide by Zero error
        // So We are checking if number.Num2 === 0 then display 0 else perform the operation.

        answer = number.Num2 === 0 ? 0 : (number.Num1 / number.Num2);

        // You can also change this ternary operation to if..else condition like
        /*
         if(number.Num2 !== 0){
            answer = number.Num1 / number.Num2;
         }
        */

    }

    document.getElementById("Answer").innerHTML = answer;

    return false;
 }

您需要更改按钮标记以防止表单提交，您可以将其更改为（将类型更改为按钮，因此它不会提交表单）

<input type="button" name="Button" id="Button" value="Submit" onclick="processData('Num1','Num2')" />

或（将 return false 放在 js 函数的末尾并将 onclick 更改为onclick="return processData('Num1','Num2')"所以它不会提交表单。

<input type="submit" name="Button" id="Button" value="Submit" onclick="return processData('Num1','Num2')" />

Answer 2

您可以通过以下代码执行此操作：

 <script>
    var number = new Object();
    Num1 = "";
    Num2 = "";
    function processData(Num1, Num2) {
      //debugger;
        // get all the fields' values
        Num1 = document.getElementById('Num1').value;
        Num2 = document.getElementById('Num2').value;
        if (Num1 == null || Num1 == "" || Num1 == undefined) {
            Num1 = 0;
        }
        if (Num2 == null || Num2 == ""|| Num2==undefined) {
            Num2 = 0;
        }
        var answer=0;
        //Check which radio button is checked
        if (document.getElementById('Add').checked) {
            //Shoot out answer
            answer = Number(Num1) + Number(Num2);
        }
        if (document.getElementById('Multiply').checked) {
            //Shoot out answer
            answer = Number(Num1) * Number(Num2);
        }
        if (document.getElementById('Substract').checked) {
            //Shoot out answer
            answer = Number(Num1) - Number(Num2);
        }
        if (document.getElementById('Divide').checked) {
            //Shoot out answer
            answer = Number(Num1) /Number (Num2);
        }


        //Write answer
        document.getElementById("Answer").innerHTML = answer;

    }
   </script>

您必须通过以下代码将输入类型更改为按钮而不是提交按钮：

<input type="button" name="Button" id="Button" value="Submit"         
onclick="processData('Num1','Num2')" />