如何更改单选输入字段中文本的颜色

Question

Ok so I am making a test that has a list of questions that contains a list of answers. Im trying to make the test change the color of the users wrong answers to highlight red and have the correct answers highlighted green. I understand how to change the background color of elements. However i do not understand how to change the background color of the inner html of a input element of the radio type. When i run this code i think its trying to change the actual radio input. Any help is appreciated.

A sample for HTML test:

<ol>

<li ><p id = "question 1">What are the three main areas of the Standard User Interface?</p>
  <ul type="none">
    <li><input type="radio" name="q1" value="0"  /> Header, Banner, Frame, Application Window</li>
    <li><input type="radio" name="q1" value="0"  /> Content Frame, Homepage, Form </li>
    <li><input type="radio" name="q1" value="1"  /> Application Navigator, Banner Frame, Content Frame </li>
    <li><input type="radio" name="q1" value="0"  /> Larry, Moe, and Curly</li>
  </ul>
</li>

<li><p id = "question 2">In the  User interface, what is the gray toolbar called which allows you to add bookmarks?</p>

  <ul type="none">
    <li><input type="radio" name="q2" value="0" /> Gauge</li>
    <li><input type="radio" name="q2" value="1" /> Edge</li>
    <li><input type="radio" name="q2" value="0" /> Remedy</li>
    <li><input type="radio" name="q2" value="0" /> Banner</li>
  </ul>
</li>

<li><p id = "question 3">What can be captured in an update set?</p>

  <ul type="none">
    <li><input type="radio" name="q3" value="0" /> Modified CI Rules</li>
    <li><input type="radio" name="q3" value="1" /> Business Rules</li>
    <li><input type="radio" name="q3" value="0" /> Scheduled Jobs</li>
    <li><input type="radio" name="q3" value="0" /> None of these</li>
  </ul>
</li>

</ol>

<button id = "finish" onchange = "hide" onclick="finishTest()"> Submit Test  </button> <button id = "retry"  onclick="reloadPage()"> Try Again?</button>

My javascript Code:

function finishTest(){
//There are actually 37 questions on the test so far only included 3
var score = 0;
var totalQuestions = 37;


for(var questionNum = 1; questionNum<=totalQuestions; questionNum++) {
    var radios = document.getElementsByName('q'+questionNum);
    var uQuestion = document.getElementById("question "+questionNum).innerHTML;
    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked && radios[i].value=="1"){

            score++;
            alert(radios.innerHTML);
            radios.innerHTML.style.backgroundColor = "lawngreen";

            }else if (radios[i].checked && radios[i].value=="0"){


            alert(radios.innerHTML);
            radios.innerHTML.style.backgroundColor = "red";


            }
    }
}

score = parseFloat(score*100/totalQuestions).toFixed(1);
alert("You scored "+score+"%");

document.getElementById('finish').style.visibility='hidden';

}

Answer 1

Just make two css classes "correct" and "wrong". Then assign these classes to the corresponding li elements.

Jsfiddle demo

li.correct{

    color:green;
}
li.wrong{

    color:red;
}

Answer 2

The best approach is to use two different classes correct and wrong and assign them to answers.

1. Define the style of two CSS classes correct and wrong :

    .correct { background-color : green; } .wrong { background-color : red; } 

2. Then in your JavaScript, assign the corresponding classes for each answer (the corresponding <li> tag) :

    yourAnswer.className="correct"; or yourAnswer.className="wrong"; 

Where yourAnswer is the <li> of each selected answer.

Note: As suggested by Chris Baker it would be better to put the input button and its corresponding text in a label together, it's more ergonomic as you can see in the first radio of the DEMO.

  <li>
    <label for="q1a">
        <input id="q1a" type="radio" name="q1" value="0"  /> Answer with a label
    </label>
  </li>

Here's a DEMO Fiddle