Javascript 如何更改收音机输入字段中文本的颜色
好的,我正在做一个测试,有一个问题列表,包含一个答案列表。我试图让测试改变用户错误答案的颜色,将其高亮显示为红色,将正确答案高亮显示为绿色。我了解如何更改元素的背景色。但是,我不明白如何更改radio类型的输入元素的内部html的背景色。当我运行这段代码时,我认为它试图改变实际的无线电输入。感谢您的帮助 HTML测试的示例:Javascript 如何更改收音机输入字段中文本的颜色,javascript,html,Javascript,Html,好的,我正在做一个测试,有一个问题列表,包含一个答案列表。我试图让测试改变用户错误答案的颜色,将其高亮显示为红色,将正确答案高亮显示为绿色。我了解如何更改元素的背景色。但是,我不明白如何更改radio类型的输入元素的内部html的背景色。当我运行这段代码时,我认为它试图改变实际的无线电输入。感谢您的帮助 HTML测试的示例: <ol> <li ><p id = "question 1">What are the three main areas of the
<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>
标准用户界面的三个主要方面是什么
- 标题、横幅、框架、应用程序窗口
- 内容框架、主页、表单
- 应用程序导航器、横幅框架、内容框架
- 拉里、莫和科莉
在用户界面中,允许添加书签的灰色工具栏叫什么
- 仪表
- 边缘
- 补救措施
- 横幅
更新集中可以捕获什么
- 修改的CI规则
- 商业规则
- 计划作业
- 这些都不是
提交测试并重试?
我的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';
}
函数finishTest(){
//到目前为止,测试中有37个问题,其中只有3个
var得分=0;
var=37;
对于(var questionNum=1;questionNum只需创建两个css类“正确”和“错误”。然后将这些类分配给相应的li
元素
最好的方法是使用两个不同的类正确
和错误
,并将它们分配给答案
定义两个CSS类的样式correct
和error
:
.correct {
background-color : green;
}
.wrong {
background-color : red;
}
然后在JavaScript中,为每个答案分配相应的类(相应的
标记):
其中,yourAnswer
是每个选定答案的
注意:如图所示,最好将输入
按钮及其相应的文本
放在标签
中,这更符合人体工程学,如您在演示的第一个收音机中所见
<li>
<label for="q1a">
<input id="q1a" type="radio" name="q1" value="0" /> Answer with a label
</label>
</li>
用标签回答
这里有一些概念上的问题。文本不是radio的innerHTML,它是LI的内部HTML的一部分,输入是它的子对象,就像文本一样。其次,innerHTML属性不是一个对象,它是一个字符串值。它没有自己的样式属性。第三,您正在引用radios.innerHTML.style
--这是试图更改数组的innerHTML属性的style属性,该属性根本不存在。radios[i].parentNode.style.backgroundColor
可能会让您达到目的。因此,我应该尝试更改列表项的背景颜色,对吗?是的,收音机和文本都是LI的子元素。现在,根据您使用CSS布局文本的方式,如果将文本包装在另一个元素中(如span)可能会更好。此外,我如果在输入和文本周围都放置标签标签,这将有助于提高表单的可用性,因为用户可以单击文本来选择选项,而不是试图成为“鼠标狙击手”而且,如果你像kasper在回答中建议的那样使用类,你不必在javascript中加入内联css——这是一个很好的实践!我没有发布答案,这些只是注释,不能作为答案。发布答案的人没有错,他们只是没有很好地解释自己,你可以选择其中一个:)chsdk看起来很顽强,选择他的HEHE你的代码包含OP也犯过的错误:你不能在收音机上放置样式或类,因为那是一个数组。他正在数组中迭代,所以收音机[i]
是元素,您可以在其中添加或删除类。我看到您更正了它,我收回了我的否决票。如果您要在标记中添加标签,这将是一个很好的建议:)谢谢,但我还没有真正理解您的建议?我建议您可以通过建议他在表单中添加标签,从而使您的答案更加完整,如下所示:——通过单击文本,然后单击第二个选项,尝试选择第一个选项。无论何时使用收音机和一些文本,您都应该将它们包装在标签中,以方便用户。这不是问题的一部分,但可能是完整答案的一部分。由您决定:)好的,谢谢,我现在看到了,请指出,我正在编辑我的答案。
yourAnswer.className="correct"; or yourAnswer.className="wrong";
<li>
<label for="q1a">
<input id="q1a" type="radio" name="q1" value="0" /> Answer with a label
</label>
</li>