I am trying to implement a feature where clicking on the correct answer will change its color to green, while clicking on the wrong answer will change it to red. I also want to add an additional functionality: if the right-answer button is clicked twice, it should first change to a specific color on the first click and then turn white on the second click. However, upon testing this additional functionality, I encountered a bug where the button cannot return to its original color.
I attempted to use hello to address this issue, but there seems to be a mistake somewhere...
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 class="false" style="background-color: white">IPv3</button>
<button class="true" style="background-color: white">IPv4</button>
<button class="false" style="background-color: white">IPv5</button>
<p id="check"></p>
</body>
</html>