如何在javascript中更改文本跟随函数的颜色

好的，在我把这段代码做成意大利面条之前，我想我会在这问一下。我为一个在线网站做了一个测验

答案存储在一个数组中，并且有一个函数可以检查你点击的答案数组。然后它计算它们并给出你的分数

但我想在用户点击评分按钮时更改正确答案的clor。因此，正确答案会突出显示。像这样的东西只需点击底部的submit，不需要做测试

旁边的小回答图标看起来很浮华，但我宁愿让文字改变颜色。下面是我的问题的格式

<p>Film speed refers to:</p>
<p id = "question1">
<input type="radio" name="question1" id="Wrong" value = "a" onClick = "recordAnswer(1,this.value)"/>How long it takes to develop film. <br/>
<input type="radio" name="question1" id="Wrong" value = "b" onClick = "recordAnswer(1,this.value)"/>How fast film moves through film-transport system.  <br/>
<input type="radio" name="question1" id="Answer" value = "c" onClick = "recordAnswer(1,this.value)"/>   How sensitive the film is to light.  <br/>
<input type="radio" name="question1" id="Wrong" value = "d" onClick = "recordAnswer(1,this.value)"/>    None of these makes sense. <br/></p>

这是计算分数的最后一个按钮

function scoreQuiz()
{
var totalCorrect = 0;
for(var count = 0; count<correctAnswers.length;count++)
{
    if(answers[count]== correctAnswers[count])

    totalCorrect++;

}
<!--
alert("You scored " + totalCorrect + " out of 12 correct!");
-->
}

唯一的问题是“答案”似乎没有注册。有人能解释一下吗

好的，所以我不能有两个或更多相同的ID

那怎么办

if(value == correctAnswers[])
{
// change the color.
}

您应该以更有用的方式格式化ID。。我建议做一些类似于questionNUMBER\u-answerVALUE的事情

那么这将是一个简单的问题

for (var i=0; i<correctAnswers;i++) {
  document.getElementById("question" + (i+1) + "_answer" + correctAnswers[i].toUpperCase()).style.color = "#0000FF";
};

只需检查我是否已将您的零/非零索引与问题/答案编号正确关联。

快速响应：

使用

改进

演示：

嗨，泛音

首先，你需要重新设计你的HTML模式

您有多个id=error，而不是class=error

下面是代码的外观：

var answers = { 1:'a' , 2:'f' , 3:'h' };

    function checkQuestions() {
    var form_elements = document.question_form.elements.length;

    for ( var i = 0; i < form_elements; i++ )
    {
        var type = question_form.elements[i].type;
        if ( type == "radio" ){
        var quest = question_form.elements[i];
        //if ( quest.checked ) {
        var question_index = parseInt(quest.name.split('_')[1]);
        //}
        if ( quest.value == answers[question_index] ) {
        quest.parentNode.style.border = '1px solid green';
        quest.parentNode.style.color = 'green';
          } else {
        //quest.parentNode.style.border = '1px solid red';
        quest.parentNode.style.color = 'red';
          }
      }
    }
  }

---

PS：使用样式更新的演示示例。。。看在上帝的份上

强制jquery解决方案：

var highlightCorrect = function(){
    $(".Answer").css("color", "#00FF00");
}

这都是假设你使用HTML来代替错误和答案的类，

而不是使用我会考虑使用多长时间来冲洗胶卷。您仍然可以使用jQuery选择器来查找它，而且它在语义上更加正确。然后，您还可以通过单击文本来选择该选项

---

尽管您的其他HTML在语义上不正确。您需要为每个收音机指定一个唯一的ID。

不允许有两个或两个以上具有相同ID的元件。我不知道。有什么建议吗？新版本发布了。id已更改为正确的id和错误的id。你知道我怎么用你的for循环改变颜色吗？我看得出你在干什么。

    <p>
    <input type="radio" name="question_1" class="wrong" value="a" />
    How long it takes to develop film. 
  </p>

if(value == correctAnswers[])
{
YOUR_ELEMENT.parentNode.style.color = 'green';
}

var answers = { 1:'a' , 2:'f' , 3:'h' };

    function checkQuestions() {
    var form_elements = document.question_form.elements.length;

    for ( var i = 0; i < form_elements; i++ )
    {
        var type = question_form.elements[i].type;
        if ( type == "radio" ){
        var quest = question_form.elements[i];
        //if ( quest.checked ) {
        var question_index = parseInt(quest.name.split('_')[1]);
        //}
        if ( quest.value == answers[question_index] ) {
        quest.parentNode.style.border = '1px solid green';
        quest.parentNode.style.color = 'green';
          } else {
        //quest.parentNode.style.border = '1px solid red';
        quest.parentNode.style.color = 'red';
          }
      }
    }
  }

 <form name="question_form" id="question_form" method="POST" action='#'>
      <div id="question_1"> <H4>QUESTIONS TIME 1</H4>
      </div>
      <p>
        <input type="radio" name="question_1" class="wrong" value="a" />
        How long it takes to develop film.
      </p>
      <p>
        <input type="radio" name="question_1" class="wrong" value="b" />
        How fast film moves through film-transport system.
      </p>
      <p>
        <input type="radio" name="question_1" class="answer" value="c" />
        How sensitive the film is to light.
      </p>
      <p>
        <input type="radio" name="question_1" class="wrong" value="d" />
        None of these makes sense. 
      </p>

       ...
       ...

        <input type="radio" name="question_2" class="wrong" value="h" />
        <span>None of these makes sense. 
        </span>
      </p>

      <input type="submit" name="submit" onclick="checkQuestions();return false;" value="submit"/>
    </form> 

var highlightCorrect = function(){
    $(".Answer").css("color", "#00FF00");
}