用单选按钮制作的计算器的问题答案

【问题标题】：Problem with calculator made with radio button用单选按钮制作的计算器的问题
【发布时间】：2020-10-22 13:59:36
【问题描述】：

我正在尝试用单选按钮制作一个计算器，但由于某种原因，我的代码只读取第一个参数（如果）而忽略了其余部分。即使我可能检查了乘法单选按钮，这也会导致代码执行加法。下面是代码：-

//HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="number" name="num1" id="num1">
        <input type="number" name="num2" id="num2"><br>
        <input type="radio" name="add" id="add">Addition(+)
        <input type="radio" name="sub" id="sub">Subtraction(-)
        <input type="radio" name="mul" id="mul">Multiplication(x)
        <input type="radio" name="divi" id="divi">Division(/)
        <input type="radio" name="mod" id="mod">Modulus(%)<br>
        <button type="submit">submit</button>
        <input type="number" name="num3" id="num3">
    </form>
    <script src="calculator.js"></script>
</body>
</html>

//JAVASCRIPT


const form = document.querySelector('form');

form.addEventListener('submit', e =>{
    e.preventDefault();

    const num1 = parseInt(document.querySelector('#num1').value);
    const num2 = parseInt(document.querySelector('#num2').value);

    if(document.getElementById('add').checked = true){
        let c = num1+num2;
        form.num3.value =c;
    }
    else if(document.getElementById('sub').checked = true){
        let d = num1-num2;
        form.num3.value =d;
    }
    else if(document.getElementById('mul').checked = true){
        let e = num1*num2;
        form.num3.value =e;
    }
    else if(document.getElementById('divi').checked = true){
        let f = num1/num2;
        form.num3.value =f;
    }
    else if(document.getElementById('mod').checked = true){
        let h = num1%num2;
        form.num3.value =h;
    }

});

【问题讨论】：

标签： javascript html forms radio-button

【解决方案1】：

您的表单错误，每种信息的表单名称必须不同

您不需要为表单元素使用id（因为您可以通过它们的名称来捕捉它们）
不需要使用check属性直接获取单选按钮的元素值

const myForm = document.getElementById('my-form')

myForm.onsubmit=e=>
  {
  e.preventDefault()
  switch(myForm.calc.value)
    {
    case 'add': myForm.result.value = myForm.num1.valueAsNumber + myForm.num2.valueAsNumber; break;
    case 'sub': myForm.result.value = myForm.num1.valueAsNumber - myForm.num2.valueAsNumber; break;
    case 'mul': myForm.result.value = myForm.num1.valueAsNumber * myForm.num2.valueAsNumber; break;
    case 'div': myForm.result.value = myForm.num1.valueAsNumber / myForm.num2.valueAsNumber; break;
    case 'mod': myForm.result.value = myForm.num1.valueAsNumber % myForm.num2.valueAsNumber; break;
    default: myForm.result.value = '...';
    }
  }

/* some cosmetic... */
fieldset { margin: .8em; min-width: 20em;}
label, fieldset { display: block; float:  left; clear: both;}
output { display: block; border: 1px solid grey;  min-width:4em; text-align: center; padding: .3em; float: right;}

<form id="my-form">
  <fieldset>
    <input type="number" name="num1" placeholder="first number">
    <input type="number" name="num2" placeholder="second number">     
  </fieldset>
  
  <label> <input type="radio" name="calc" value="add" > Addition (+) </label>
  <label> <input type="radio" name="calc" value="sub" > Subtraction (-)     </label>
  <label> <input type="radio" name="calc" value="mul" > Multiplication (x)  </label>
  <label> <input type="radio" name="calc" value="div" > Division (/)        </label>
  <label> <input type="radio" name="calc" value="mod" > Modulus (%)         </label>

  <fieldset>
    <button type="submit"> submit </button>
    <output name="result" >...</output>
  </fieldset>
</form>

【讨论】：

【解决方案2】：

要将单选按钮组合在一起，请为它们指定相同的名称，并且只能选择该组中的一个单选按钮。还要修改您的条件，而不是 =（赋值运算符）使用 ===（比较运算符）。

const form = document.querySelector('form');

form.addEventListener('submit', e =>{
    e.preventDefault();

    const num1 = parseInt(document.querySelector('#num1').value);
    const num2 = parseInt(document.querySelector('#num2').value);

    if(document.getElementById('add').checked === true){
        let c = num1+num2;
        form.num3.value =c;
    }
    else if(document.getElementById('sub').checked === true){
        let d = num1-num2;
        form.num3.value =d;
    }
    else if(document.getElementById('mul').checked === true){
        let e = num1*num2;
        form.num3.value =e;
    }
    else if(document.getElementById('divi').checked === true){
        let f = num1/num2;
        form.num3.value =f;
    }
    else if(document.getElementById('mod').checked === true){
        let h = num1%num2;
        form.num3.value =h;
    }

});

<form>
  <input type="number" name="num1" id="num1">
  <input type="number" name="num2" id="num2"><br>
  <input type="radio" name="calc" id="add">Addition(+)
  <input type="radio" name="calc" id="sub">Subtraction(-)
  <input type="radio" name="calc" id="mul">Multiplication(x)
  <input type="radio" name="calc" id="divi">Division(/)
  <input type="radio" name="calc" id="mod">Modulus(%)<br>
  <button type="submit">submit</button>
  <input type="number" name="num3" id="num3">
</form>

【讨论】：

【解决方案3】：

您在代码中使用的是赋值运算符=，而不是比较运算符===。所以，条件真的没有比较任何东西。应该这样写：

if (document.getElementById('add').checked === true)

【讨论】：