HTML: click the button, it changes color. Then click the button, however, it doesn't change to-CodePudding

I want to achieve a functionality where I click the correct answer, it turns into green. If click the wrong answer, it turns into red. Next I want to add a functionality: if I click the right-answer button twice, it first changes into specific color with first click, and changes into white with second click. However, this additional functionality comes with a bug. It can't turn into original color. I try to use hello to achieve this additional functionality, but somewhere seems to be wrong...

let b = document.querySelectorAll('.false');
let hello = -1;
document.querySelector('.true').addEventListener('click', function() {
  if (hello === 0) {
    document.querySelector('.true').style.backgroundColor = 'white';
    document.getElementById('check').innerHTML = null;
  }
  hello = 0;
  document.querySelector('.true').style.backgroundColor = 'red';
  document.querySelector('#check').innerHTML = 'Correct!';
  document.querySelector('#check').style.color = 'green';
  for (let i = 0; i < b.length; i  ) {
    b[i].style.backgroundColor = 'white';
  }
})

for (let i = 0; i < b.length; i  ) {
  b[i].addEventListener('click', function() {
    if (hello === 1) {
      b[i].style.backgroundColor = 'white';
      document.getElementById('check').innerHTML = null;
    }
    hello = 1;
    b[i].style.backgroundColor = 'green';
    document.querySelector('#check').innerHTML = 'Incorrect.';
    document.querySelector('#check').style.color = 'red';
    b[b.length - i - 1].style.backgroundColor = 'white';
    document.querySelector('.true').style.backgroundColor = 'white';
  })
}

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Trivia!</title>
</head>

<body>
  <h3>IP version</h3>
  <button  style="background-color: white">IPv3</button>
  <button  style="background-color: white">IPv4</button>
  <button  style="background-color: white">IPv5</button>
  <p id="check"></p>

</body>

</html>

CodePudding user response：

Even though your if statement runs, you overwrite styles after that. You got 2 cases:

Where it is first time clicking the correct button,
It is second time clicking the correct button

So a simple if - else will solve this: (I also made changes on some styling, because in your code correct button were red, and wrong buttons were green.)

  let b = document.querySelectorAll('.false');
  let hello = -1;
  document.querySelector('.true').addEventListener('click', function () {
    if (hello === 0) {
      hello = -1;
      document.querySelector('.true').style.backgroundColor = 'white';
      document.getElementById('check').innerHTML = null;
    } else {
      hello = 0;
      document.querySelector('.true').style.backgroundColor = 'green';
      document.querySelector('#check').innerHTML = 'Correct!';
      document.querySelector('#check').style.color = 'green';
    }
    for (let i = 0; i < b.length; i  ) {
      b[i].style.backgroundColor = 'white';
    }
  })

  for (let i = 0; i < b.length; i  ) {
    b[i].addEventListener('click', function () {
      if (hello === 1) {
        b[i].style.backgroundColor = 'white';
        document.getElementById('check').innerHTML = null;
      }
      hello = 1;
      b[i].style.backgroundColor = 'red';
      document.querySelector('#check').innerHTML = 'Incorrect.';
      document.querySelector('#check').style.color = 'red';
      b[b.length - i - 1].style.backgroundColor = 'white';
      document.querySelector('.true').style.backgroundColor = 'white';
    })
  }

  <h3>IP version</h3>
  <button  style="background-color: white">IPv3</button>
  <button  style="background-color: white">IPv4</button>
  <button  style="background-color: white">IPv5</button>
  <p id="check"></p>

CodePudding user response：

You just need to add a return keyword inside the conditional checking hello === 0, as shown below:

let b = document.querySelectorAll('.false');
let hello = -1;
document.querySelector('.true').addEventListener('click', function() {
  if (hello === 0) {
    document.querySelector('.true').style.backgroundColor = 'white';
    document.getElementById('check').innerHTML = null;
    return; // THIS IS ADDED
  }
  hello = 0;
  document.querySelector('.true').style.backgroundColor = 'red';
  document.querySelector('#check').innerHTML = 'Correct!';
  document.querySelector('#check').style.color = 'green';
  for (let i = 0; i < b.length; i  ) {
    b[i].style.backgroundColor = 'white';
  }
})

// .......

BTW, you must swap the 'red' and 'green' strings in your code where you style the background-color CSS property, because right now when we click the wrong button, it is made green (where it should have been made red).

So the correct code will be:

let b = document.querySelectorAll('.false');
let hello = -1;
document.querySelector('.true').addEventListener('click', function() {
  if (hello === 0) {
    document.querySelector('.true').style.backgroundColor = 'white';
    document.getElementById('check').innerHTML = null;
    return
  }
  hello = 0;
  document.querySelector('.true').style.backgroundColor = 'green'; // CHANGED HERE
  document.querySelector('#check').innerHTML = 'Correct!';
  document.querySelector('#check').style.color = 'green';
  for (let i = 0; i < b.length; i  ) {
    b[i].style.backgroundColor = 'white';
  }
})

for (let i = 0; i < b.length; i  ) {
  b[i].addEventListener('click', function() {
    if (hello === 1) {
      b[i].style.backgroundColor = 'white';
      document.getElementById('check').innerHTML = null;
    }
    hello = 1;
    b[i].style.backgroundColor = 'red'; // CHANGED HERE
    document.querySelector('#check').innerHTML = 'Incorrect.';
    document.querySelector('#check').style.color = 'red';
    b[b.length - i - 1].style.backgroundColor = 'white';
    document.querySelector('.true').style.backgroundColor = 'white';
  })
}

CodePudding user response：

document.querySelectorAll(".false").forEach((value) => {
  value.addEventListener("click", () => {
    let currentColor = document.getElementById(value.id);
    currentColor.style.backgroundColor =
      currentColor.style.backgroundColor === "red" ? "white" : "red";
  });
});

document.querySelectorAll(".true").forEach((value) => {
  value.addEventListener("click", () => {
    let currentColor = document.getElementById(value.id);
    currentColor.style.backgroundColor =
      currentColor.style.backgroundColor === "green" ? "white" : "green";
  });
});

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Trivia!</title>
  </head>

  <body>
    <h3>IP version</h3>
    <button id="1"  style="background-color: white;">IPv3</button>
    <button id="2"  style="background-color: white;">IPv4</button>
    <button id="3"  style="background-color: white;">IPv5</button>
    <p id="check"></p>
  </body>
</html>