需要帮助迭代类以更新 JS true 或 false 游戏中的分数

Question

我正在用 JavaScript 构建一个真或假游戏，通过将 10 个分数元素中的每一个更改为绿色或红色来表示正确或不正确的答案，从而进行评分。这些分数元素都是共享“分数元素”类的 div。我在尝试迭代每个问题的每个元素时遇到的问题是，所有元素都会更改为红色或绿色，而不仅仅是问题 1、问题 2 等的相关元素。

我已附上 GitHub 链接，供大家查看。

提前非常感谢！

文字

................................

Answer 1

我是盲目这样做的，但问题就在这里：

function checkAnswer() {
    const currentQuestion = questionsAnswers[questionIndex];
    const correctAnswer = currentQuestion.correctAnswer;
    console.log(correctAnswer)
    const scoreBar = document.getElementsByClassName("score-elements");
    Array = [score1, score2, score3, score4, score5, score6, score7, score8, score9, score10];
    if (userAnswer === correctAnswer) {
        for (var i = 0; i < scoreBar.length; i++) {
            console.log(scoreBar[i]);
            scoreBar[i].style.backgroundColor = "green";
         }
        /**document.getElementById("score1").style.backgroundColor = "green";**/
    } else {
        for (var i = 0; i < scoreBar.length; i++) {
            console.log(scoreBar[i]);
            scoreBar[i].style.backgroundColor = "red";
         }
        /**document.getElementById("score1").style.backgroundColor = "red";**/
    }
    questionIndex++;
    loadQuestion();
}

您不需要循环遍历所有

scoreBar

项目，因为这些项目与答案一样多。因此，使用

questionIndex

来告诉

scoreBar

中的哪个元素需要更改样式就足够了。

function checkAnswer() {
    const currentQuestion = questionsAnswers[questionIndex];
    const correctAnswer = currentQuestion.correctAnswer;
    console.log(correctAnswer)
    const scoreBar = document.getElementsByClassName("score-elements");

    // CHANGES
    const color = (userAnswer === correctAnswer) ? 'green' : 'red';

    scoreBar[questionIndex].style.backgroundcolor = color;
    // END: CHANGES

    questionIndex++;
    loadQuestion();
}

//question and answer array
const questionsAnswers = [
    {
        question: "Dundee was a former capital of Scotland - Aye or Naw?",
        correctAnswer: "naw",
    },
    {
        question: "Gorillas usually eat more than 15kg of food per day - Aye or Naw?",
        correctAnswer: "aye",
    },
    {
        question: "K2 is the second highest mountain in the world - Aye or Naw?",
        correctAnswer: "aye",
    },
    {
        question: "Irn-Bru was first created in Edinburgh - Aye or Naw?",
        correctAnswer: "naw",
    },
    {
        question: "The song ‘(Everything I Do) I Do It For You’ by Bryan Adams is the UK’s longest running number one single - Aye or Naw?",
        correctAnswer: "aye",
    },
    {
        question: "North America is the fourth largest continent in the world - Aye or Naw?",
        correctAnswer: "naw",
    },
    {
        question: "Sir Chris Hoy has won six Olympic gold medals in track cylcing - Ayr or Naw?",
        correctAnswer: "aye",
    },
    {
        question: "PDF stands for Personal Document Format - Aye or Naw?",
        correctAnswer: "naw",
    },
    {
        question: "The London Underground has more stations than the Paris Metro - Aye or Naw?",
        correctAnswer: "naw",
    },
    {
        question: "The planet Pluto is smaller than the moon - Aye or Naw?",
        correctAnswer: "aye",
    },
];
let questionIndex = 0;
let userAnswer;
document.addEventListener("DOMContentLoaded", function () {
    let buttons = document.querySelectorAll("button");
    for (let button of buttons) {
        button.addEventListener("click", function () {
            if (this.getAttribute("data-type") === "button") {
            }
        })
    }
    runGame();
});
function runGame() {
    let plrName = document.getElementById("pname");
    let playButton = document.getElementById("play-button");
    document.getElementById("game-area").style.display = "none";
    plrName.addEventListener("input", () => {
        if (plrName.value.length === 3) {
            playButton.style.display = "none";
            startGame();
        } else {
            playButton.style.display = "block";
        }
    });
    const aye = document.getElementById("aye-button");
    const naw = document.getElementById("naw-button");
    aye.addEventListener("click", () => {
        userAnswer = "aye"; 
        checkAnswer();
    });
    naw.addEventListener("click", () => {
        userAnswer = "naw";
        checkAnswer();
    });
}
function startGame() {
    document.getElementById("game-area").style.display = "block";
    loadQuestion();
}
function loadQuestion() {
    const currentQuestion = questionsAnswers[questionIndex];
    document.getElementById("question-box").innerHTML = currentQuestion.question;
}
function checkAnswer() {
    const currentQuestion = questionsAnswers[questionIndex];
    const correctAnswer = currentQuestion.correctAnswer;
    console.log(correctAnswer)
    const scoreBar = document.getElementsByClassName("score-elements");
    Array = [score1, score2, score3, score4, score5, score6, score7, score8, score9, score10];
    if (userAnswer === correctAnswer) {
        for (var i = 0; i < scoreBar.length; i++) {
            console.log(scoreBar[i]);
            scoreBar[i].style.backgroundColor = "green";
         }
        /**document.getElementById("score1").style.backgroundColor = "green";**/
    } else {
        for (var i = 0; i < scoreBar.length; i++) {
            console.log(scoreBar[i]);
            scoreBar[i].style.backgroundColor = "red";
         }
        /**document.getElementById("score1").style.backgroundColor = "red";**/
    }
    questionIndex++;
    loadQuestion();
}
//increment to 10, displaying correct answers as green and incorrect as red in the score-bar
function updateScore() {
}
//once all ten questions have been answered the player is told if won or lost and invited to play again
function endGame() {
}