我目前正在学习 javascript,并尝试按照 javascript_source 中提供的示例使用单选按钮在 javascript 中进行测验。 .我现在陷入一种情况,我希望根据所选答案将所选单选按钮标签颜色更改为红色或绿色。
我已将代码放入 jsfiddle ,我能够让它在纽约浏览器中工作,但我不知道为什么它在 jsfiddle 中似乎不起作用,基本思想是相同的,只是我想根据正确的内容更改所选单选按钮标签的颜色或者错误。
任何有关此问题的帮助将不胜感激
**编辑* 感谢下面的评论,jsfiddle 现在可以工作了
最佳答案
已修复,http://jsfiddle.net/aEeKt/8/ 。我所做的只是添加以获取父项 <li>
并添加 .correct
或.incorrect
根据答案对其进行分类。
HTML
<h3>Web Design Quiz</h3>
<form name="quiz">
1. What does CSS stand for?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q1" value="Colorful Style Symbols">Colorful Style Symbols</li>
<li><input type="radio" name="q1" value="Cascading Style Sheets">Cascading Style Sheets</li>
<li><input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>
</ul>
2. What does DHTML stand for?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q2" value="Dramatic HTML">Dramatic HTML</li>
<li><input type="radio" name="q2" value="Design HTML">Design HTML</li>
<li><input type="radio" name="q2" value="Dynamic HTML">Dynamic HTML</li>
</ul>
3. Who created Javascript?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q3" value="Microsoft">Microsoft</li>
<li><input type="radio" name="q3" value="Netscape">Netscape</li>
<li><input type="radio" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>
</ul>
4. What does CGI stand for?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q4" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
<li><input type="radio" name="q4" value="Common GIF Interface">Common GIF Interface</li>
<li><input type="radio" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>
</ul>
<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear answers">
<p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
Correct answers:<br>
<textarea class="bgclr" name="solutions" wrap="virtual" rows="4" cols="30" disabled>
</textarea>
</form>
Javascript
// Insert number of questions
var numQues = 4;
// Insert number of choices in each question
var numChoi = 3;
// Insert number of questions displayed in answer area
var answers = new Array(4);
// Insert answers to questions
answers[0] = "Cascading Style Sheets";
answers[1] = "Dynamic HTML";
answers[2] = "Netscape";
answers[3] = "Common Gateway Interface";
// Do not change anything below here ...
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < numQues; i++) {
currElt = i * numChoi;
for (j = 0; j < numChoi; j++) {
currSelection = form.elements[currElt + j];
cParent = currSelection.parentNode;
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
cParent.className = 'correct';
break;
}else{
cParent.className = 'incorrect';
}
}
}
}
score = Math.round(score / numQues * 100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i = 1; i <= numQues; i++) {
correctAnswers += i + ". " + answers[i - 1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
CSS
li.correct{
color: green;
}
li.incorrect{
color: red;
}
关于javascript - 更改 JavaScript 中选定单选按钮的标签颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12669181/