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

Question

我正在尝试制作一个带有单选按钮的计算器，但出于某种原因，我的代码只读取第一个参数 (if) 而忽略其余参数。这会导致代码执行加法，即使我可能已经检查了乘法单选button.here 是下面的代码：-

//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;
    }

});

Answer 1

您在代码中使用了赋值运算符 = 而不是比较运算符 ===。所以，条件真的不能比较什么。应该这样写：

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

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

Answer 3

你的表格有误，每种信息的表格名称必须不同

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

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>

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

Problem with calculator made with radio button

html

javascript

forms

radio-button