javascript - 单选按钮。选中以使用用户输入 javascript 执行数学表达式

Question

我有两个文本框，用户在每个文本框中输入一个数字，然后单击一个单选按钮来选择要在计算按钮上执行的数学运算。这是一项家庭作业，因此只有 javascript 和 html正在使用，没有jquery。目前，当我单击按钮时，似乎没有发生任何事情，并且我没有收到控制台错误...

HTML

<div>
    <p>Enter two numbers, select a math, then click the button.<br>
    The answer will be shown below.</p>
    <form>
        1st number: <input type="text" name="number1">
        2nd number: <input type="text" name="number2">
        <br>
        <input type="radio" name="add">Add <br>
        <input type="radio" name="subtract">Subtract <br>
        <input type="radio" name="multiply">Multiply <br>
        <input type="radio" name="division">Division <br>
        <input type="button" name="calc" onclick="calculate()" value="Calculate"> <br>              
    </form>
    <p id="math_res"></p>
</div>

Javascript

function calculate(){
    var num1 = parseInt("document.getElementsByName('number1').value;", 10);
    var num2 = parseInt("document.getElementsByName('number2').value;", 10);
    var add = document.getElementsByName("add");
    var sub = document.getElementsByName("subtract");
    var multi = document.getElementsByName("multiply");
    var divis = document.getElementsByName("division");
    var res = document.getElementById("math_res").innerHTML;

    if (add.checked == true){
        res = num1 + num2;
    }
    else if ( sub.checked == true){
        res = num1 + num2;
    }
    else if (multi.checked == true){
        res = num1 * num2;
    }
    else if (divis.checked == true){
        res = num1 / num2;
    }
}

我认为我的函数将从两个文本框中获取输入并将用户输入转换为整数并将它们分配给变量 num1 和 num2。然后将每个单选按钮分配给一个变量以减少 document.get 的输入...每个 if 语句都会检查该 radio 是否已被检查。如果为 true 则执行计算，如果为 false 则移动到下一个 if 语句并将结果显示在段落元素中。

我哪里出错了？

Answer 1

您有几个问题。

getElementsByName 返回元素集合，而不是单个元素，因此:

 var add = document.getElementsByName("add");

会将未定义分配给添加。但您不需要使用它，只需将控件引用为表单的命名属性即可。从监听器传递对按钮的引用:

<input type="button" name="calc" onclick="calculate(this)" value="Calculate">

然后在函数中获取以下形式:

function calculate(element) {
  var form = element.form;

现在就做:

var num1 = parseInt(form.number1.value, 10);

等等，这也解决了引用控件时遇到的其他问题。

此外，单选按钮需要具有相同的名称，以便只能选择一个，因此正如 Felix 所说，为它们提供相同的名称并在值(或类或其他属性值)上进行区分。您需要循环它们以找出要执行的操作，因此 HTML 可能是:

  <input type="radio" name="operation" value="add">Add <br>
  <input type="radio" name="operation" value="subtract">Subtract <br>
  <input type="radio" name="operation" value="multiply">Multiply <br>
  <input type="radio" name="operation" value="division">Division <br>

然后获取操作:

  var radios = form.operation;
  var op;
  for (var i=0; i<radios.length; i++) {
    if (radios[i].checked) {       
       op = radios[i].value;
       break;
    }
  }

现在检查op的值来计算是否进行加、减等操作。

这是一个简单的示例，我不推荐这样的内联脚本，但它很方便播放。

<form>
  <input type="radio" name="operation" value="add">Add <br>
  <input type="radio" name="operation" value="subtract">Subtract <br>
  <input type="radio" name="operation" value="multiply">Multiply <br>
  <input type="radio" name="operation" value="division">Division <br>
  <input type="button" onclick="
    var form = this.form;
    var radios = form.operation;
    var op;
    for (var i=0; i<radios.length; i++) {
      if (radios[i].checked) {       
         op = radios[i].value;
         break;
      }
    }
    form.selectedOperation.value = op || 'No operation selected';
  " value="Get selected operation">
  <input type="text" readonly name="selectedOperation"><br>
  <input type="reset">
</form>