如何更改无线电输入字段中文本的颜色

How do i change the color of the text in a radio input field

本文关键字：文本 颜色 中文 字段 何更改 无线电 输入      更新时间：2023-09-26

好的，我正在做一个测试，它有一个包含答案列表的问题列表。我试图让测试将用户错误答案的颜色改为突出显示红色，并将正确答案突出显示为绿色。我了解如何更改元素的背景色。然而，我不知道如何更改单选类型的输入元素的内部html的背景色。当我运行这个代码时，我认为它试图改变实际的无线电输入。感谢您的帮助。

HTML测试示例：

<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>

我的javascript代码：

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';
}

最好的方法是使用两个不同的类correct和wrong，并将它们分配给答案。

  1. 定义两个CSS类correct和wrong:的样式

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

  2. 然后在您的JavaScript中，为每个答案分配相应的类（相应的<li>标签）：

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

其中，yourAnswer是每个所选答案的<li>。

注意：正如Chris Baker所建议的，最好将input按钮及其相应的text放在label中，这更符合人体工程学，正如您在DEMO的第一个收音机中看到的那样。

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

这是演示键盘

只需使两个css类"正确"answers"错误"即可。然后将这些类分配给相应的CCD_ 11元素。

Jsfidle演示

li.correct{
    color:green;
}
li.wrong{
    color:red;
}
相关文章：