答题按钮颜色切换异常：正确按钮二次点击无法恢复原色

• 要实现的功能：
  • 点击正确答案按钮（带.true类的），按钮变为绿色；点击错误答案按钮（带.false类的），按钮变为红色。
  • 同一按钮点击两次：第一次切换为对应颜色，第二次恢复为白色。
• 遇到的bug：添加重复点击恢复功能后，按钮无法变回原始白色，使用变量hello实现的逻辑存在问题。

JavaScript #

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';
  })
}

HTML #

<!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>

问题根源 #

1. 颜色逻辑颠倒：正确按钮点击后被设为红色，错误按钮被设为绿色，完全与需求相反。
2. 状态变量冲突：用单个hello变量控制所有按钮的状态，点击不同按钮会互相干扰状态判断。
3. 执行顺序错误：判断状态后立刻修改hello值，后续的颜色设置直接覆盖了之前的恢复操作，导致恢复逻辑失效。

修复后的代码 #

JavaScript

const trueBtn = document.querySelector('.true');
const falseBtns = document.querySelectorAll('.false');
const checkText = document.getElementById('check');

// 单独记录每个按钮的激活状态，避免互相干扰
const buttonStates = {
  true: false,
  false: new Array(falseBtns.length).fill(false)
};

// 正确按钮点击逻辑
trueBtn.addEventListener('click', function() {
  // 重置所有错误按钮的状态和颜色
  falseBtns.forEach((btn, index) => {
    btn.style.backgroundColor = 'white';
    buttonStates.false[index] = false;
  });
  
  if (buttonStates.true) {
    // 第二次点击：恢复白色，清空提示
    trueBtn.style.backgroundColor = 'white';
    checkText.innerHTML = '';
  } else {
    // 第一次点击：设为绿色，显示正确提示
    trueBtn.style.backgroundColor = 'green';
    checkText.innerHTML = 'Correct!';
    checkText.style.color = 'green';
  }
  // 切换当前按钮的激活状态
  buttonStates.true = !buttonStates.true;
});

// 错误按钮点击逻辑
falseBtns.forEach((btn, index) => {
  btn.addEventListener('click', function() {
    // 重置正确按钮的状态和颜色
    trueBtn.style.backgroundColor = 'white';
    buttonStates.true = false;
    
    // 重置其他错误按钮的状态和颜色
    falseBtns.forEach((otherBtn, otherIndex) => {
      if (otherIndex !== index) {
        otherBtn.style.backgroundColor = 'white';
        buttonStates.false[otherIndex] = false;
      }
    });
    
    if (buttonStates.false[index]) {
      // 第二次点击：恢复白色，清空提示
      btn.style.backgroundColor = 'white';
      checkText.innerHTML = '';
    } else {
      // 第一次点击：设为红色，显示错误提示
      btn.style.backgroundColor = 'red';
      checkText.innerHTML = 'Incorrect.';
      checkText.style.color = 'red';
    }
    // 切换当前错误按钮的激活状态
    buttonStates.false[index] = !buttonStates.false[index];
  });
});

HTML（无需修改）

<!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>

修复说明 #

• 给每个按钮单独维护激活状态，避免不同按钮之间的状态干扰。
• 修正颜色逻辑：正确按钮设为绿色，错误按钮设为红色，符合需求。
• 调整执行顺序：先根据当前状态处理颜色和提示，再切换按钮状态，避免操作被覆盖。
• 点击任意按钮时自动重置其他按钮的状态和颜色，保证界面状态统一。

内容的提问来源于stack exchange，提问作者Kartone