时间戳

首页 > 解决方案 > 用单选按钮制作的计算器的问题

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

问题描述

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

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

});

标签： javascripthtmlformsradio-button

解决方案

你的表格是错误的，表格的名称对于每种信息必须是不同的

您不需要使用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>

推荐阅读