How to access the value of a radio button

Question

I am trying to access the value of a radio button using HTML and Javascript to make a simple quiz but it does not seem to be working. Here is my code:

function check() {
var a = document.getElementById("test").value
if (a === "one") {
alert("Correct!")
} else {
alert("Wrong!")
}
}

<h1><center>Simple Quiz</center></h1>
<br>
1) What is 1 + 1?
<br>
<form>
  <input type="radio" name="one" id="test" value="one">1<br>
  <input type="radio" name="one" id="test" value="two">2<br>
  <input type="radio" name="one" id="test" value="three">3<br>
  <button onclick="check()">Check</button>
</form>

It always says "Correct!" even when it is not. Does anyone know how to fix this?

Also, use checked property to see if radio button is selected and then read the value. — Madhan Kumar, Jun 03 '18 at 19:03
Possible duplicate of [How to get the selected radio button’s value?](https://stackoverflow.com/questions/9618504/how-to-get-the-selected-radio-button-s-value) — Isaac Krementsov, Jun 03 '18 at 19:13

CodeF0x · Accepted Answer · 2018-06-03T19:45:42.097

Some points you are missing:

An id must be unique on the whole page
To check if a radio button is checked, use its checked attribute

function check() {
  var two = document.getElementById("two");
  if (two.checked) {
    alert("Correct!")
  } else {
    alert("Wrong!")
  }
}

<h1>
  <center>Simple Quiz</center>
</h1>
<br> 1) What is 1 + 1?
<br>
<form>
  <input type="radio" name="one" id="one" value="one">1<br>
  <input type="radio" name="one" id="two" value="two">2<br>
  <input type="radio" name="one" id="three" value="three">3<br>
  <button onclick="check()">Check</button>
</form>

score 0 · Answer 2 · answered Jun 03 '18 at 19:14

First, you cannot have the same id on multiple elements. Make to give your elements a unique id and if you need to give them all the same style you could use class instead.

Instead of checking the value of the radio button, you should check whether the radio button is checked.

Take a look at the example below.

function check() {
  if (document.getElementById('test2').checked) {
    alert('correct');
  } else {
    alert('wrong');
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
</head>
<body>
  <h1><center>Simple Quiz</center></h1>
<br>
1) What is 1 + 1?
<br>
<form>
  <input type="radio" name="one" id="test1" value="one">1<br>
  <input type="radio" name="one" id="test2" value="two">2<br>
  <input type="radio" name="one" id="test3" value="three">3<br>
  <button onclick="check()">Check</button>
</form>
</body>
</html>

score 0 · Answer 3 · answered Jun 03 '18 at 19:29

you should not define more than one element with the same id that's a bad practice, you could improve your code function check() { for (elemnt of document.getElementByClassName('test') ) { if (element.checked ) alert('correct'); else alert ("incrrect");}} Them in the html you can do this <input type="radio" class="test" value="1">

<input type="radio" class="test" value="2"> <input type="radio" class="test" value="3">

How to access the value of a radio button

3 Answers3