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

radio button .checked to perform a math expression using user input javascript

本文关键字：javascript 输入 执行数 表达式 用户 单选按钮      更新时间：2023-09-26

我有两个文本框，用户在每个文本框中输入一个数字，然后单击单选按钮以选择要在计算按钮上执行的数学运算。这是一个家庭作业，所以只有javascript和html都是用的，没有jquery。目前，当我点击按钮，似乎什么都没有发生，我没有得到控制台错误…

<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语句都会检查那个无线电but是否被选中。如果为真，执行计算;如果为假，移动到下一个If语句，并在段落元素中显示结果。

我哪里做错了?

你有几个问题。

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

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

将undefined赋值给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>

我注意到一些问题。

1。getElementsByName返回一个类似数组的NodeList。您需要在访问value之前检索NodeList中的第一个元素。例如,

document.getElementsByName('number1')[0].value

2。您正在向parseInt传递一个文字代码字符串。你应该写像

这样的东西
parseInt(document.getElementsByName('number1')[0].value, 10);

3。代码var res = document.getElementById('math_res').innerHTML存储了对元素innerHTML的引用。例如，当您分配res = num1 + num2时，您只是覆盖引用，而不是实际更改innerHTML。要纠正这个错误，

var elem = document.getElementById('math_res');
// later...
elem.innerHTML = num1 + num2;

4。您错误地定义了多个具有不同名称的单选按钮。为了让浏览器将它们呈现为一个"单选按钮组"，其中只能选择一个，它们必须具有相同的名称，但不同的"value"属性。关于如何使用JavaScript定义单选按钮组并提取其值的示例，请参阅RobG的回答或下面的Plunkr。

你的代码的工作版本在这里。

Edit请注意，这些是使您的代码工作的最小编辑。RobG的回答展示了一种更正确的提取表单字段值的方法。

这是我的版本，希望对你有所帮助。

<!DOCTYPE html>
<html>
<body>
    <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" id = 'number1'>
            2nd number: <input type="text" name="number2" id = 'number2'>
            <br>
            <input type="radio" name="button" id = 'add' >Add <br>
            <input type="radio" name="button" id = 'substract'>Subtract <br>
            <input type="radio" name="button" id = 'multiply'>Multiply <br>
            <input type="radio" name="button" id = 'division'>Division <br>
            <input type="button" name="calc" onclick="calculate()" value="Calculate"> <br>              
        </form>
        <p id="math_res"></p>
    </div>
    <script>
        function calculate(){
            //Obtaining the references to the text inputs
            var number1 = parseInt(document.getElementById('number1').value);
            var number2 = parseInt(document.getElementById('number2').value);
            //Reference of the result Box
            var resultBox = document.getElementById('math_res');
            resultBox.innerHTML = '';
            //Reference of the radio buttons
            var buttonAdd = document.getElementById('add');
            var buttonSubstract = document.getElementById('substract');
            var buttonMultiply = document.getElementById('multiply');
            var buttonDivision = document.getElementById('division');
            //Make the magic
            if(buttonAdd.checked == true){
                resultBox.innerHTML = number1 + number2
            }
            else{
                if(buttonSubstract.checked == true){
                    resultBox.innerHTML = number1 - number2
                }
                else{
                    if(buttonMultiply.checked == true){
                        resultBox.innerHTML = number1 * number2
                    }
                    else{
                        if(buttonDivision.checked == true){
                            resultBox.innerHTML = number1 / number2
                        }
                    }
                }
            }            
        }
    </script>
</body>

相关文章：