检查表单的单选按钮值

Question

我需要检查单选按钮的值并使用 switch case 根据用户选择执行计算。请帮我运行这个代码。

<body>
<form id="calculate" method="get"></form>
    <label for="num1">Enter 1st number (1 to 10)</label>
    <input id="num1" type="number" min="1" max="10"/><br/>

    <label for="num2">Enter 2nd number (1 to 10)</label>
    <input id="num2" type="number" min="1" max="10"/>

    <p>Select your calculation option</p>

    <input type="radio" name="operation" value="a"/>
    <label for="addition">Add</label><br/>

    <input type="radio" name="operation" value="s"/>
    <label for="subtraction">Subtract</label><br/>

    <input type="radio" name="operation" value="m"/>
    <label for="multiplication">Multiply</label><br/>


    <input type="radio" name="operation" value="d"/>
    <label for="division">Divide</label><br/>

    <input type="radio" name="operation" value="r"/>
    <label for="remainder">Remainder</label><br/>

    <input type="button" value="Submit" onclick="calculator()"/>

<p id="output"></p>

<script>
    function calculator() {
        var result;
        var op = document.getElementsByName('operation');
        switch(op) {
            case=a:
                result=num1+num2;
                break;
            case=s:
                result=num1-num2;
                break;
            case=m:
                result=num1*num2;
               break;
            case=d:
                result=num1/num2;
                break;
            case=r:
                result=num1%num2
        }
            return(result);
    }
    document.getElementById("output").innerHTML="The result of calculation is ...."+ result;
</script>
</body>

Answer 1

我在你的代码中发现了多个错误。从逻辑错误到语法错误。我建议使用 https://jsfiddle.net/.

等工具编写示例代码

我使用以下示例修复了您的代码。希望对您有所帮助:)

function calculator() {
  var result;
  var num1 = Number(document.getElementById('num1').value);
  var num2 = Number(document.getElementById('num2').value);

  var op = document.querySelector('input:checked').value;
  switch (op) {
    case 'a':
      result = num1 + num2;
      break;

    case 's':
      result = num1 - num2;
      break;

    case 'm':
      result = num1 * num2;
      break;

    case 'd':
      result = num1 / num2;
      break;

    case 'r':
      result = num1 % num2;

  }
  document.getElementById("output").innerHTML = "The result of calculation is .... " + result;
}

<form id="calculate" method="get"></form>
<label for="num1">Enter 1st number (1 to 10)</label>
<input id="num1" type="number" min="1" max="10" /><br/>

<label for="num2">Enter 2nd number (1 to 10)</label>
<input id="num2" type="number" min="1" max="10" />

<p>Select your calculation option</p>

<input type="radio" name="operation" value="a" />
<label for="addition">Add</label><br/>

<input type="radio" name="operation" value="s" />
<label for="subtraction">Subtract</label><br/>

<input type="radio" name="operation" value="m" />
<label for="multiplication">Multiply</label><br/>


<input type="radio" name="operation" value="d" />
<label for="division">Divide</label><br/>

<input type="radio" name="operation" value="r" />
<label for="remainder">Remainder</label><br/>

<input type="button" value="Submit" onclick="calculator()" />

<p id="output"></p>

检查表单的单选按钮值

Checking radio button value of a form

html

javascript

forms

radio-button