Javascript 为JS测验将正确答案设为绿色，错误答案设为红色

我有一个用JS创建的测验系统。我使用输入元素来显示每个测验选项。我正试图这样做，当您单击submit时，它将循环遍历每个输入元素，如果答案正确，则将输入文本的样式设置为绿色，如果答案不正确，则设置为红色。然而，我在获取输入值旁边的文本时遇到了困难

以下是测验的图片：

HTML:

JAVASCRIPT:

function check(){

    var question1 = document.quiz.question1.value;
    var question2 = document.quiz.question2.value;
    var question3 = document.quiz.question3.value;
    var correct = 0;
    var total_questions = 3;


    if (question1 == "Providence") {
        correct++;
}
    if (question2 == "Hartford") {
        correct++;
}   
    if (question3 == "Albany") {
        correct++;
    }


    var score;

    if (correct == 0) {
        score = 2;
    }

    if (correct > 0 && correct < total_questions) {
        score = 1;
    }

    if (correct == total_questions) {
        score = 0;
    }

    $( "input" ).each(function( index ) {
        console.log( index + ": " + $( this ).val() );
        // CHANGE THE STYLING HERE. VAL DOES NOT GET THE TEXT OF INPUT AND NIETHER DOES .text()
    });

    document.getElementById("after_submit").style.visibility = "visible";

    document.getElementById("message").innerHTML = "Correct Answers:";
    document.getElementById("number_correct").innerHTML = "Score: " + correct + " / " + total_questions + " (" + Math.trunc((correct / total_questions)*100) + "%)";


    }

---

我想我可以在数组中存储正确的答案，如果输入有值，则将文本样式更改为绿色，否则将其更改为红色。

嗨，这可以通过添加一个其他条件来完成

风格

.mystyle{
    border-color: red;
}


if (question2 == "Hartford") {
    correct++;
}   
else{
var element = document.getElementById("textbox");
 element.classList.add("mystyle");
}

在这里检查我的小提琴

---

这个代码不好。我决定在一个地方用正确的答案重写它。我还为每个输入元素添加了标签，以便更好地操作CSS

以下是JS：

function check(){

    var correct = 0;
    var total_questions = 3;
    var correct_answers = ["Providence", "Hartford", "Albany"];

    $( "label" ).each(function( index ) {
        console.log( index + ": " + $( this ).text() );
        if (correct_answers.includes($( this ).text())) {
            this.style.color = 'green'
            correct++
        } else {
            this.style.color = 'red'

        }
    });

    document.getElementById("after_submit").style.visibility = "visible";

    document.getElementById("message").innerHTML = "Correct Answers:";
    document.getElementById("number_correct").innerHTML = "Score: " + correct + " / " + total_questions + " (" + Math.trunc((correct / total_questions)*100) + "%)";


    }

---

为什么simple不使用类：

ifans==correct{$this.toggleClasscorect；correct++；}ifans！=更正{$this.toggleClassError；}

---

//css上需要哪种文本颜色这是意大利面代码。你想试着给它一些结构，也许把所有正确的答案都放在一个地方？

function check(){

    var correct = 0;
    var total_questions = 3;
    var correct_answers = ["Providence", "Hartford", "Albany"];

    $( "label" ).each(function( index ) {
        console.log( index + ": " + $( this ).text() );
        if (correct_answers.includes($( this ).text())) {
            this.style.color = 'green'
            correct++
        } else {
            this.style.color = 'red'

        }
    });

    document.getElementById("after_submit").style.visibility = "visible";

    document.getElementById("message").innerHTML = "Correct Answers:";
    document.getElementById("number_correct").innerHTML = "Score: " + correct + " / " + total_questions + " (" + Math.trunc((correct / total_questions)*100) + "%)";


    }