Javascript 检查选中的按钮并从字段中获取值后返回值

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

变量编号=新对象（）；
数字。Num1=“”；
数字。Num2=“”；
函数processData（Num1、Num2）{
//获取所有字段的值
number.Num1=document.getElementById（Num1）.value；
number.Num2=document.getElementById（Num2）.value；
//检查选中的单选按钮
if（document.getElementById（'Add'）。选中）
//断然回答
返回Num1+Num2；
//写答案
document.getElementById（“Answer”）.innerHTML=processData（Num1，Num2）
}

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>

输入您要计算的两个数字


第一个号码！


第二个号码！

请选择您希望对这些数字执行的操作


添加


倍增


减去


分

单击提交以获取您的答案


点击我！

您的答案是：

首先为单选按钮提供相同的名称，因此它表示一个组，确保只选中一个单选按钮。让我们像这样对“行动”说吧

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

您需要在按钮标记中进行更改以防止表单提交，您可以将其更改为（将类型更改为按钮以使其不提交表单）

---

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

 <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')" />

变量编号=新对象（）；
Num1=“”；
Num2=“”；
函数processData（Num1、Num2）{
//调试器；
//获取所有字段的值
Num1=document.getElementById（'Num1'）。值；
Num2=document.getElementById（'Num2'）。值；
if（Num1==null | | Num1==“”| | Num1==未定义）{
Num1=0；
}
if（Num2==null | | Num2==“”| | Num2==未定义）{
Num2=0；
}
var-answer=0；
//检查选中的单选按钮
if（document.getElementById（'Add'）。选中）{
//断然回答
答案=数字（Num1）+数字（Num2）；
}
if（document.getElementById（'Multiply'）。选中）{
//断然回答
答案=数字（Num1）*数字（Num2）；
}
if（document.getElementById（'Substract'）。选中）{
//断然回答
答案=数字（Num1）-数字（Num2）；
}
if（document.getElementById（'Divide'）。选中）{
//断然回答
答案=数字（Num1）/数字（Num2）；
}
//写答案
document.getElementById（“Answer”）.innerHTML=Answer；
}

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

 <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')" />

为单选按钮组使用相同的名称，并获取值未进行任何研究。谢谢！一切似乎都正常，看起来更干净，只是我仍然无法在表格上显示答案。有什么想法吗？@user2992279，

document.getElementById（“答案”）.innerHTML=Answer此语句将在
answer
p中显示答案tag@user2992279，答案已更新，您需要将type=“submit”更改为type=“button”，或者从函数返回false，并在onclick中使用return语句调用函数。
<input type="button" name="Button" id="Button" value="Submit"         
onclick="processData('Num1','Num2')" />