如何检测随机按钮序列中被点击的元素并添加对应CSS颜色类

核心需求 #

• 检测用户点击的具体按钮
• 按钮被点击后，根据答案是否正确为其添加对应CSS颜色类：正确答案加.btn-correct，错误答案加.btn-wrong

原有代码问题 #

原selectAnswer方法中使用document.querySelector("button")只会匹配页面中第一个button元素，无法定位到用户实际点击的按钮，导致样式添加错误。

修正后完整代码 #

JavaScript代码 #

var randomCharacter = '';
// 随机生成指定长度的字符
function getRandomCharacter(length) {
  var randomResult = '';
  const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    randomResult += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return randomResult;
}
// 生成随机题目和选项
function giveDifferentQuestionImg() {
  randomCharacter = getRandomCharacter(1);
  document.getElementById('randomPhoto').src = "alphabetAndNum/" + randomCharacter + ".png";
  var possibleAns = [getRandomCharacter(1), getRandomCharacter(1), getRandomCharacter(1), randomCharacter];
  shuffleArr(possibleAns);
  document.getElementById("ans1").innerHTML = possibleAns[0];
  document.getElementById("ans2").innerHTML = possibleAns[1];
  document.getElementById("ans3").innerHTML = possibleAns[2];
  document.getElementById("ans4").innerHTML = possibleAns[3];
  // 切换题目时清空所有按钮的历史选中样式
  document.querySelectorAll('.btn').forEach(btn => {
    btn.classList.remove('btn-correct', 'btn-wrong');
  });
}
// 数组乱序
function shuffleArr(array) {
  var currentIndex = array.length, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }
  return array;
}
// 答案选择逻辑
function selectAnswer(event) {
  const clickedBtn = event.target;
  const selectedVal = clickedBtn.innerHTML;
  if (selectedVal === randomCharacter) {
    clickedBtn.classList.add("btn-correct");
    // 若页面存在id为elemental的元素可保留下行，否则可删除
    // document.getElementById("elemental").innerHTML = selectedVal;
  } else {
    clickedBtn.classList.add("btn-wrong");
  }
}
// 页面加载完成后初始化第一题
window.onload = giveDifferentQuestionImg;

CSS代码（原有代码可直接复用，无需修改） #

.imgButton {
  text-align: center;
}
table {
  margin-left: auto;
  margin-right: auto;
}
.display-btn {
  padding: 1.5rem;
  border-radius: 2rem !important;
}
#answers-btns {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-row {
  width: 100%
}
#randomPhoto {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.bodyQuiz {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 10px;
  margin: 20px 0;
}
.btn {
  border-radius: 2rem !important;
  outline: none;
}
.btn-correct {
  background-color: rgb(35, 202, 35);
}
.btn-wrong {
  background-color: rgb(226, 58, 58);
}
.start-btn,
.next-btn {
  font-weight: bold;
}
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hide {
  display: none;
}

HTML代码（原有代码可直接复用，无需修改） #

<div>
  <img src="" name="canvas" id="randomPhoto" alt="handsign">
</div>
<div id="answer-buttons" class="btn-grid">
  <button class="btn" id="ans1" onclick="selectAnswer(event)">1</button>
  <button class="btn" id="ans2" onclick="selectAnswer(event)">2</button>
  <button class="btn" id="ans3" onclick="selectAnswer(event)">3</button>
  <button class="btn" id="ans4" onclick="selectAnswer(event)">4</button>
</div>

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