如何更改JavaScript中以下函数的文本颜色

Question

好吧，在我用这段代码制作意大利面条之前，我想我应该在这里问一下。我为一个在线网站做了一个测验。

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

但我想在用户单击得分按钮时更改正确答案的颜色。所以正确的答案会被突出显示。像这样的https://www.shutterpoint.com/Home-Quiz.cfm （只需点击底部的提交，无需进行测验）。

侧面的小答案图标看起来很华丽，但我宁愿只是让文本改变颜色。这是我的问题的格式

<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 recordAnswer(question,answer)
{
answers[question-1] = answer;
}

这是计算分数的最终按钮，

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!");
-->
}

我认为另一个功能是最好的。我已经尝试过了，并且知道我必须使用 onyl 设置颜色，

document.getElementById('Answer').style.color = '#0000ff';

问题是“答案”似乎没有注册。有人透露一些情况吗？

---

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

怎么样

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

Answer 1

快速响应：

使用

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

改进

演示：http://jsbin.com/aceze/26

嗨，泛音！

首先，您需要稍微重新设计您的 HTML 架构！

您有多个 id="Wrong" 而不是 class="Wrong"

那么您的代码应如下所示：

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 一次提交按钮，而不是像这样向每个RADIO添加onclick

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

PS：演示示例更新了风格......为了缘故！

Answer 2

您应该以更实用的方式设置 id 的格式。我建议使用类似于 questionNUMBER_answerVALUE 的格式。

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

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

只需检查我的问题/答案编号的零/非零索引是否正确。

Answer 3

我会考虑使用 冲洗胶片需要多长时间，而不是使用

。 。您仍然可以使用 jQuery 选择器来查找它，而且它在语义上感觉更正确。然后，您还可以通过单击文本来选择选项。

尽管您的其他 HTML 在语义上不正确。您需要为每个无线电提供一个唯一的 ID。

Answer 4

强制性 jquery 解决方案：

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

这一切都假设您修复 HTML 以使用类而不是 ID 来表示“错误”和“答案”。