How make input radio value as number?

Question

I am trying do arithmetic operation using radio button (just an experiment)

browser returns value NaN

let num1 = parseInt(document.querySelectorAll('#number1:checked'));
let num2 = parseInt(document.querySelectorAll('#number2:checked'));

function addTambah() {
  result = num1 + num2;
  alert(result);
}

<p>number : </p>
<input type="radio" name="number1" id="number11" value="1">
<label for="radio">1</label>
<input type="radio" name="number1" id="number12" value="2">
<label for="radio">2</label>
<p> number 2 : </p>
<input type="radio" name="number2" id="number21" value="1">
<label for="radio">1</label>
<input type="radio" name="number2" id="number22" value="2">
<label for="radio">2</label>
<br>
<button type="button" onclick="addTambah()">Add</button>

`querySelectorAll` returns an array-like nodelist. You can't parseInt on a nodelist. Try `querySelector` instead, particularly if you're targeting a element with an id. — Andy, Dec 05 '21 at 06:44
Here is a working version using ES6 and recommended methods https://jsfiddle.net/mplungjan/ro2891s4/ `const checked = document.querySelectorAll('[name^=number]:checked'); const sum = checked.length ? [...checked].map(fld => +fld.value).reduce((a, b) => a + b) : 0;` — mplungjan, Dec 05 '21 at 08:09

brk · Accepted Answer · 2021-12-05T16:34:40.883

-1

You need to get the value of the checked radio buttons inside the function & secondly every dom element should have unique id. Also use querySelector instead of querySelectorAll

function addTambah() {
  let add = document.querySelector('input[name="number1"]:checked').value;
  let add1 = document.querySelector('input[name="number2"]:checked').value;
  const result = parseInt(add, 10) + parseInt(add1, 10)
  alert(result);
}

<p>number : </p>
<input type="radio" checked name="number1" id="number1" value="1">
<label for="radio">1</label>
<input type="radio" name="number1" id="number2" value="2">
<label for="radio">2</label>
<p> number 2 : </p>
<input type="radio" name="number2" id="number3" value="1">
<label for="radio">1</label>
<input type="radio" checked name="number2" id="number4" value="2">
<label for="radio">2</label>
<br>
<button type="button" onclick="addTambah()">Add</button>

edited Dec 05 '21 at 16:34

answered Dec 05 '21 at 06:54

brk

48,835
10
56
78

yeah, i just realize my code have same id – arcahyadi Dec 05 '21 at 06:55
Your code gives error. You need `document.querySelector('input[name="number1"]:checked')?.value` since OP allows a click when nothing is checked. anyway a huge dupe – mplungjan Dec 05 '21 at 07:08
thanks, u right my codes give error when radio not clicked. thx again @mplungjan – arcahyadi Dec 05 '21 at 16:07
@arcahyadi use `checked` attribute and make default checked – brk Dec 05 '21 at 16:35

How make input radio value as number?

1 Answers1