如何更改我的 javascript 以便只有所选按钮为红色或绿色

Question

I know the title is a bit weird but I didn't know how else to phrase it. The multiple choice test I am doing has an try again button if you get it answer wrong and a next button if you answer correctly, but then I realized that if you answer something wrong, you can actually see the correct answer button highlighted in green and just click that the next time you are answering. So I want only the background and the selected button to turn red and the other buttons should stay blue if you click the wrong button... How do I do this? If you answer correctly the then it could be displayed the way it is right now. If none of this makes sense then look at the snippet, I'm pretty sure it will clear things up. Edit: I updated the correct and wrong thing in the snippet which I previously forgot to change

 const startButton = document.getElementById('start-btn') const nextButton = document.getElementById('next-btn') const questionContainerElement = document.getElementById('question-container') const questionElement = document.getElementById('question') const image1 = document.getElementById('image1') const answerButtonsElement = document.getElementById('answer-buttons') const startwords = document.getElementById('startmsg') const endbutton = document.getElementById('end-btn') const trybutton = document.getElementById('try-btn') const score = document.getElementById('score') let shuffledQuestions, currentQuestionIndex startButton.addEventListener('click', startGame) nextButton.addEventListener('click', () => { currentQuestionIndex++ setNextQuestion() }) endbutton.addEventListener('click', () => { window.top.close() }) trybutton.addEventListener('click', setNextQuestion) function startGame() { startButton.classList.add('hide') startwords.classList.add('hide') shuffledQuestions = questions.slice() questionContainerElement.classList.remove('hide') currentQuestionIndex = 0 setNextQuestion() } function setNextQuestion() { resetState() showQuestion(shuffledQuestions[currentQuestionIndex]) } function showQuestion(question) { questionElement.innerText = question.question question.answers.forEach(answer => { const button = document.createElement('button') button.innerText = answer.text button.classList.add('btn') if (answer.correct) { button.dataset.correct = answer.correct } button.addEventListener('click', selectAnswer) answerButtonsElement.appendChild(button) }) } function resetState() { clearStatusClass(document.body) nextButton.classList.add('hide') while (answerButtonsElement.firstChild) { answerButtonsElement.removeChild(answerButtonsElement.firstChild) } trybutton.classList.add('hide') } function selectAnswer(e) { const selectedButton = e.target const correct = selectedButton.dataset.correct setStatusClass(document.body, correct) Array.from(answerButtonsElement.children).forEach(button => { setStatusClass(button, button.dataset.correct) }) if(correct){ if (shuffledQuestions.length > currentQuestionIndex + 1) { nextButton.classList.remove('hide') } else { endbutton.classList.remove('hide') } } else{ trybutton.classList.remove('hide') } } function setStatusClass(element, correct) { clearStatusClass(element) if (correct) { element.classList.add('correct') } else { element.classList.add('wrong') } } function clearStatusClass(element) { element.classList.remove('correct') element.classList.remove('wrong') } const questions = [ { question: 'What is 1+2?', answers: [ { text: '3', correct: true }, { text: '4', correct: false }, { text: '5', correct: false }, { text: '6', correct: false } ] }, { question: 'What is 2-2?', answers: [ { text: '0', correct: true }, { text: '4', correct: false }, { text: '5', correct: false }, { text: '7', correct: false }, ] }, ]

 *, *::before, *::after { box-sizing: border-box; font-family: cursive, 'Times New Roman', Times, serif } #particles-js { position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: 1; }:root { --hue-neutral: 200; --hue-wrong: 0; --hue-correct: 145; } body { --hue: var(--hue-neutral); padding: 0; margin: 0; display: flex; width: 100vw; height: 100vh; justify-content: center; align-items: center; background-color: hsl(var(--hue), 100%, 20%); } body.correct { --hue: var(--hue-correct); } body.wrong { --hue: 0; }.container { width: 800px; max-width: 80%; background-color: white; border-radius: 5px; padding: 10px; box-shadow: 0 0 10px 2px; z-index: 2; }.btn-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; margin: 20px 0; }.btn { --hue: var(--hue-neutral); border: 1px solid hsl(var(--hue), 100%, 30%); background-color: hsl(var(--hue), 100%, 50%); border-radius: 5px; padding: 5px 10px; color: white; outline: none; }.btn:hover { border-color: black; }.btn.correct { --hue: var(--hue-correct); color: black; }.btn.wrong { --hue: var(--hue-wrong); }.next-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; align-items: flex-end; --hue: 245; }.start-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; --hue: 245; }.end-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; --hue: 245; }.try-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; --hue: 245; }.container1 { display: flex; justify-content: center; align-items: center; font-family: Arial; font-size: xx-large; padding: 10px 10px; }.container2 { width: 800px; max-width: 80%; background-color: white; border-radius: 5px; padding: 10px; box-shadow: 0 0 10px 2px; top:37%; position:absolute; display: flex; }.controls { display: flex; justify-content: center; align-items: center; }.hide { display: none; }.wrapper { position: absolute; top: 0px; right: 0px; }

 <,DOCTYPE html> <html lang="en"> <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script defer src="script.js"></script> <title>Quiz App</title> </head> <body> </div> <div class="container"> <div id="question-container" class="hide"> <div id="question">Question</div> <div id="answer-buttons" class="btn-grid"> <button class="btn">Answer 1</button> <button class="btn">Answer 2</button> <button class="btn">Answer 3</button> <button class="btn">Answer 4</button> </div> </div> <div class="container1"> <div id="startmsgcontainer" class="hide"></div> <div id="startmsg">Adventure Into The Human Immune System</div> </div> <div class="controls"> <button id="start-btn" class="start-btn btn">Start.</button> <button id="next-btn" class="next-btn btn hide">Next</button> <button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button> <button id="try-btn" class="try-btn btn hide">Try again.</button> </div> </div> <div class="wrapper"> <img src="img/uni.png" alt="image"> </div> <div class="hide"> <div id="imgcontainer">hello</div> <div id="image1" class="hide"> <img src="img/wantedvirus.png" alt="image1"> </div> </div> </div> <div id="particles-js"></div> <script src="particles.js"></script> <script src="app.js"></script> </body> </html>

Answer 1

Don't call setStatusClass() on all the buttons, just call it on the selectedButton .

 const startButton = document.getElementById('start-btn') const nextButton = document.getElementById('next-btn') const questionContainerElement = document.getElementById('question-container') const questionElement = document.getElementById('question') const image1 = document.getElementById('image1') const answerButtonsElement = document.getElementById('answer-buttons') const startwords = document.getElementById('startmsg') const endbutton = document.getElementById('end-btn') const trybutton = document.getElementById('try-btn') const score = document.getElementById('score') let shuffledQuestions, currentQuestionIndex startButton.addEventListener('click', startGame) nextButton.addEventListener('click', () => { currentQuestionIndex++ setNextQuestion() }) endbutton.addEventListener('click', () => { window.top.close() }) trybutton.addEventListener('click', setNextQuestion) function startGame() { startButton.classList.add('hide') startwords.classList.add('hide') shuffledQuestions = questions.slice() questionContainerElement.classList.remove('hide') currentQuestionIndex = 0 setNextQuestion() } function setNextQuestion() { resetState() showQuestion(shuffledQuestions[currentQuestionIndex]) } function showQuestion(question) { questionElement.innerText = question.question question.answers.forEach(answer => { const button = document.createElement('button') button.innerText = answer.text button.classList.add('btn') if (answer.correct) { button.dataset.correct = answer.correct } button.addEventListener('click', selectAnswer) answerButtonsElement.appendChild(button) }) } function resetState() { clearStatusClass(document.body) nextButton.classList.add('hide') while (answerButtonsElement.firstChild) { answerButtonsElement.removeChild(answerButtonsElement.firstChild) } trybutton.classList.add('hide') } function selectAnswer(e) { const selectedButton = e.target const correct = selectedButton.dataset.correct setStatusClass(document.body, correct) setStatusClass(selectedButton, correct); if(correct){ if (shuffledQuestions.length > currentQuestionIndex + 1) { nextButton.classList.remove('hide') } else { endbutton.classList.remove('hide') } } else{ trybutton.classList.remove('hide') } } function setStatusClass(element, correct) { clearStatusClass(element) if (correct) { element.classList.add('correct') } else { element.classList.add('wrong') } } function clearStatusClass(element) { element.classList.remove('correct') element.classList.remove('wrong') } const questions = [ { question: 'What is 1+2?', answers: [ { text: '3', correct: true }, { text: '4', correct: false }, { text: '5', correct: false }, { text: '6', correct: false } ] }, { question: 'What is 2-2?', answers: [ { text: '0', correct: true }, { text: '4', correct: false }, { text: '5', correct: false }, { text: '7', correct: false }, ] }, ]

 *, *::before, *::after { box-sizing: border-box; font-family: cursive, 'Times New Roman', Times, serif } #particles-js { position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: 1; }:root { --hue-neutral: 200; --hue-wrong: 0; --hue-correct: 145; } body { --hue: var(--hue-neutral); padding: 0; margin: 0; display: flex; width: 100vw; height: 100vh; justify-content: center; align-items: center; background-color: hsl(var(--hue), 100%, 20%); } body.correct { --hue: var(--hue-correct); } body.wrong { --hue: 0; }.container { width: 800px; max-width: 80%; background-color: white; border-radius: 5px; padding: 10px; box-shadow: 0 0 10px 2px; z-index: 2; }.btn-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; margin: 20px 0; }.btn { --hue: var(--hue-neutral); border: 1px solid hsl(var(--hue), 100%, 30%); background-color: hsl(var(--hue), 100%, 50%); border-radius: 5px; padding: 5px 10px; color: white; outline: none; }.btn:hover { border-color: black; }.btn.correct { --hue: var(--hue-correct); color: black; }.btn.wrong { --hue: var(--hue-wrong); }.next-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; align-items: flex-end; --hue: 245; }.start-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; --hue: 245; }.end-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; --hue: 245; }.try-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; --hue: 245; }.container1 { display: flex; justify-content: center; align-items: center; font-family: Arial; font-size: xx-large; padding: 10px 10px; }.container2 { width: 800px; max-width: 80%; background-color: white; border-radius: 5px; padding: 10px; box-shadow: 0 0 10px 2px; top:37%; position:absolute; display: flex; }.controls { display: flex; justify-content: center; align-items: center; }.hide { display: none; }.wrapper { position: absolute; top: 0px; right: 0px; }

 <,DOCTYPE html> <html lang="en"> <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script defer src="script.js"></script> <title>Quiz App</title> </head> <body> </div> <div class="container"> <div id="question-container" class="hide"> <div id="question">Question</div> <div id="answer-buttons" class="btn-grid"> <button class="btn">Answer 1</button> <button class="btn">Answer 2</button> <button class="btn">Answer 3</button> <button class="btn">Answer 4</button> </div> </div> <div class="container1"> <div id="startmsgcontainer" class="hide"></div> <div id="startmsg">Adventure Into The Human Immune System</div> </div> <div class="controls"> <button id="start-btn" class="start-btn btn">Start.</button> <button id="next-btn" class="next-btn btn hide">Next</button> <button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button> <button id="try-btn" class="try-btn btn hide">Try again.</button> </div> </div> <div class="wrapper"> <img src="img/uni.png" alt="image"> </div> <div class="hide"> <div id="imgcontainer">hello</div> <div id="image1" class="hide"> <img src="img/wantedvirus.png" alt="image1"> </div> </div> </div> <div id="particles-js"></div> <script src="particles.js"></script> <script src="app.js"></script> </body> </html>