Getting the value of a checked radio button using javascript

Question

I am trying to access the value of a checked radio button in my form using JavaScript only, no jQuery. I have looked this up and seen many answers but when I copy the same code into my project it doesn't work for some reason. Here is my code.

<form>
     <input type="radio" name="style" value="3" checked>
     <input type="radio" name="style" value="5">
     <input type="radio" name="style" value="10">
</form>

I tried to access the value using this JavaScript code:

var value = document.querySelector('input[name="style"]:checked').value;
console.log(value);

I would assume this would give me the string of 3 as the logged value. When I try this example I get the following error:

request.js:1 Uncaught TypeError: Cannot read property 'value' of null
    at request.js:1

I also tried using a for loop of an array of the inputs named style and that didn't work either. It found all three inputs but didn't have values for them in the array. Can someone please explain what is wrong? And if this is obvious please be patient I am still learning I am just trying to get better.

It works fine for me in a single file (copy the HTML and insert JS in same file under ` — Daniel, Jul 15 '17 at 17:54
Your code works for me. Are you starting off with none of the radio buttons checked? Your error will only happen if `document.querySelector('input[name="style"]:checked')` is null, which would only happen if A) the radio buttons aren't in the DOM yet or B) if none of the radio buttons are checked. — JonLuca, Jul 15 '17 at 17:56
I found the problem. I have my JavaScript in an external file. I moved it from the head of my document to under all the HTML so it loaded after the page was rendered. I assume this was what fixed it right? And thank you all for the responses. People have killed me on here before for asking questions but I don't have a tutor and I am new so it's like damn thanks for killing my spirit trying to find an answer. — Travis Alexander Terrell, Jul 15 '17 at 18:05

score 2 · Answer 1 · answered Jul 15 '17 at 18:17

Your code is correct, you only need is an event to run the selector code to get the value of selected value. See below code :- you can also use javascript selector for click event instead of function placement in onclick event handler.

 
function run_test(){
     
     var radio_ele = document.querySelector('input[name="style"]:checked');
     console.log(radio_ele.value);

}

<form>
  <input type="radio" name="style" value="3">
  <input type="radio" name="style" value="5">
  <input type="radio" name="style" value="10">
  <button type="button" onclick="run_test()">click</button>
</form>

score 0 · Accepted Answer · answered Jul 15 '17 at 17:56

function getValue() {
  var value = document.querySelector('input[name="style"]:checked').value;
  console.log(value);
}

<form>
     <input type="radio" name="style" value="3" checked>
     <input type="radio" name="style" value="5">
     <input type="radio" name="style" value="10">
     <button type="button" onclick="getValue()">click</button>
</form>

you code is working fine, except you need event to get latest value after load

Getting the value of a checked radio button using javascript

2 Answers2