How do I revert a button color?-CodePudding

I'm trying to write plain JS code to implement a multiple choice question. I have been able to get the button colors to change to red or green depending on if the correct answer is selected, however I want to make sure that when a separate answer is clicked the remaining buttons revert back to their original color. I am trying to do this with a for loop. There doesn't seem to be errors in the code as per dev tools but the red buttons just stay red when the correct answer is clicked after. Where am I going wrong here?

<!-- revert button colors (#d9edff) using the variables unclicked and doc query selector-->
document.addEventListener('DOMContentLoaded', function(){
  let correct = document.querySelector(".correct_answer");
  correct.addEventListener('click', function() {
    correct.style.backgroundColor = 'green';
    let correct_feedback = document.querySelector(".feedback");
    correct_feedback.innerText = 'Correct!';
    let unclicked = document.querySelectorAll(".incorrect_answer");
    for (let i = 0; i < unclicked.length; i  ){
      unclicked.style.backgroundColor = '#d9edff';
      }
    });
  let incorrects = document.querySelectorAll(".incorrect_answer");
  incorrects.forEach(item => item.addEventListener('click', function(event) {
    let clicked = event.srcElement;
    clicked.style.backgroundColor = 'red';
    let incorrect_feedback = document.querySelector(".feedback");
      incorrect_feedback.innerText = 'Incorrect';
  }));
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <title>Trivia!</title>
  </head>
  <body>
    <div >
      <h1>Trivia!</h1>
    </div>

    <div >
      <div >
        <h2>Part 1: Multiple Choice </h2>
        <hr>
        <h3>How many species of Dolphin are there?</h3>
          <button >42</button>
          <button >53</button>
          <button >24</button>
          <button >11</button>
          <p ></p>
      </div>

CodePudding user response：

  let unclicked = document.querySelectorAll(".incorrects");

are you sure you want this? Not ".incorrect_answer" ?

CodePudding user response：

never lose hope doing something . i choosed onclick and onblur events . you will be more strong if you will be doing this same thing using onm ouseup onm ousedown events . it will give you more confidence more than you think . we are always there to help you . never lose hope !!

let change1=(event)=>{
    event.target.style.backgroundColor="green"
}
let change2=(event)=>{
    event.target.style.backgroundColor="red"
}
let blur2=(event)=>{
    event.target.style.backgroundColor="white"
}

<div >
    <h1>Trivia!</h1>
</div>
<div >
    <div >
        <h2>Part 1: Multiple Choice </h2>
        <hr>
        <h3>How many species of Dolphin are there?</h3>
            <button id="correct_answer" onclick="change1(event)" onblur="blur2(event)">42</button>
            <button  onclick="change2(event)" onblur="blur2(event)">53</button>
            <button  onclick="change2(event)" onblur="blur2(event)">24</button>
            <button  onclick="change2(event)" onblur="blur2(event)">11</button>
            <p ></p>
    </div>
</div>