javascript - Getting the selected radio without using "Id" but "name"

Question

I was trying to get selected radio button by using "document.getElementByName('nameOfradio')" because all of the radio buttons share the same name. But, nothing happened. I tried the same thing with document.getElementById('nameOfradio') and worked well.However, I had to give unique id for all of the radio buttons. So that, it turns ugly when i have 20 radio buttons. As a result, what I wanted is making a shortcut. How can i get the value of selected radio button by using their "name"? Codes;

Html

<input type="radio" name="nameOfradio" value="onm1" /> 1
<input type="radio" name="nameOfradio" value="onm2" /> 2

<input type='button' onclick='radio3()' value='Submit' />
</form>

Ajax(relavant part of radio3())

var radioPushed = document.getElementByName('nameOfradio').value;

var queryString = "?radioPushed=" + radioPushed;//to send the value to another file
ajaxRequest.open("GET", "radio_display.php" + queryString, true);
ajaxRequest.send(null);

As i said document.getElementById worked but it requires too much work:( How can i make it simplier by using common feature of radio buttons, instead of giving them unique id? A short explanation why i could not make it would be very helpful(new in javascript and ajax)

Answer 1

This line:

document.getElementByName('nameOfradio').value

should be:

 document.querySelector('input[name=nameOfradio]:checked').value;

using querySelector

Note that CSS pseudo-classes are accessed by a colon (:).