我想访问具有相同名称或 ID 的函数并使用 javascript 更改它们的样式

Question

This are my options for which text i want to change the style

<form id="question29">
<input type="radio" onclick="cbg()" name = "q30" value="A"><div name="ques29">(A) wavelength</div>
<br><input type="radio" onclick="cbg()" name = "q30" value="B"><div name="ques29">(B) frequency</div>
<br><input type="radio" onclick="cbg()" name = "q30" value="C"><div name="ques29">(C) intensity</div>
<br><input type="radio" onclick="cbg()" name = "q30" value="D"><div name="ques29">(D) work function</div>
</form>

Now i want to change the color of suppose options (D) work function to green so how can i do that well i have defined a class qa to do this

.qa {
color:green;
font-size:200%;
}

and then i have written this code

document.getElementByName("ques29")[1].className = "qa"; 

well i am able to change the color if i assign different names to everyone but unfortunately i need some way to access the options in a format of somename[0] somename[1] somename[2] and somename[3]

any suggestions thankx in advance

Answer 1

Change getElementByName() to getElementsByName() (with an 's') to solve the issue of the code not working.

In response to your comment, simply removing the div 's and replacing them with labels 's should still behave how you want.

EDIT:

Your markup should look like this:

<form id="question29">
    <input type="radio" onclick="cbg()" name = "q30" value="A"><label name="ques29">(A) wavelength</label>
    <br><input type="radio" onclick="cbg()" name = "q30" value="B"><label name="ques29">(B) frequency</label>
    <br><input type="radio" onclick="cbg()" name = "q30" value="C"><label name="ques29">(C) intensity</label>
    <br><input type="radio" onclick="cbg()" name = "q30" value="D"><label name="ques29">(D) work function</label>
</form>