CODEWITHSUNDEEP
javascripthtmlformsradio-button
Davis Johnson
Davis Johnson

Reputation: 99

Problem with calculator made with radio button

I'm trying to make a calculator with radio button but for some reason my code only reading the first argument(if) while ignoring the rest. This causes the code to perform addition even when I may have checked the multiplication radio button.here is the code below:-

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

});

Upvotes: 1

Views: 53

Answers (3)

Mister Jojo
Mister Jojo

Reputation: 22432

your form is wrong, form's names must be different for each kind of information

you don't need to use id for form's elements (as you can catch them by their names)
you don'need to use the check attribute but directly get the element value of the 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>

Upvotes: 1

sonEtLumiere
sonEtLumiere

Reputation: 4572

To group radio buttons together, assign them the same name and only one radio button from that group can be selected. Also modify your conditions, instead = (assignment operator) use === (comparison operator).

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>

Upvotes: 1

Charlie
Charlie

Reputation: 23858

You are using the assignment operator = instead of a comparison operator === in your code. So, the conditions really are not comparing anything. It should be put as follows:

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

Upvotes: 1

Related Questions