在Trivia答题游戏开发中，获取用户点击的按钮索引并校验答案是实现交互逻辑的核心环节，整个过程需要完成按钮事件绑定、索引传递、答案比对三个关键步骤。
整体实现思路
首先需要创建答题选项按钮，给每个按钮绑定点击事件，在事件触发时获取当前按钮对应的索引，然后将该索引对应的答案和正确答案进行比对，最后给出校验结果。整个流程不需要复杂的依赖，仅使用原生JavaScript即可完成。
按钮结构与索引绑定
我们可以先创建一组答题选项按钮，通过循环遍历的方式给每个按钮添加索引标识，方便后续获取点击的按钮位置。以下是按钮的HTML结构示例：
<div class="trivia-options"> <button class="option-btn">选项一</button> <button class="option-btn">选项二</button> <button class="option-btn">选项三</button> <button class="option-btn">选项四</button> </div> <div class="result"></div>
接下来通过JavaScript给按钮绑定事件并存储索引，这里使用data-index自定义属性来存储每个按钮的索引值：
// 获取所有选项按钮
const optionBtns = document.querySelectorAll('.option-btn');
// 正确答案索引，假设正确答案是第二个选项
const correctIndex = 1;
// 遍历按钮绑定事件
optionBtns.forEach((btn, index) => {
// 给按钮添加自定义索引属性
btn.dataset.index = index;
// 绑定点击事件
btn.addEventListener('click', handleOptionClick);
});
获取按钮索引的实现
在按钮的点击事件中，我们可以通过两种方式获取当前点击按钮的索引。第一种是直接读取之前设置的data-index属性：
function handleOptionClick(event) {
// 获取点击的按钮元素
const clickedBtn = event.currentTarget;
// 从自定义属性中获取索引
const btnIndex = parseInt(clickedBtn.dataset.index);
console.log('点击的按钮索引是：', btnIndex);
// 调用校验函数
checkAnswer(btnIndex);
}
第二种方式是在循环绑定时直接将索引作为参数传入事件处理函数，这种方式不需要额外设置自定义属性：
optionBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
console.log('点击的按钮索引是：', index);
checkAnswer(index);
});
});
答案校验逻辑实现
获取到按钮索引后，只需要将索引和预设的正确答案索引进行比对即可完成校验，同时可以给用户展示对应的提示信息：
function checkAnswer(clickedIndex) {
const resultEl = document.querySelector('.result');
if (clickedIndex === correctIndex) {
resultEl.textContent = '回答正确！';
resultEl.style.color = 'green';
} else {
resultEl.textContent = '回答错误，正确答案是第' + (correctIndex + 1) + '个选项';
resultEl.style.color = 'red';
}
}
完整示例代码
以下是整合了所有功能的完整代码，可以直接复制到本地运行测试：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trivia游戏答案校验</title>
<style>
.option-btn {
display: block;
margin: 10px 0;
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
.result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="trivia-options">
<button class="option-btn">巴黎</button>
<button class="option-btn">伦敦</button>
<button class="option-btn">纽约</button>
<button class="option-btn">东京</button>
</div>
<div class="result"></div>
<script>
const optionBtns = document.querySelectorAll('.option-btn');
// 正确答案：伦敦是第二个选项，索引为1
const correctIndex = 1;
const resultEl = document.querySelector('.result');
optionBtns.forEach((btn, index) => {
btn.dataset.index = index;
btn.addEventListener('click', () => {
const clickedIndex = parseInt(btn.dataset.index);
checkAnswer(clickedIndex);
});
});
function checkAnswer(clickedIndex) {
if (clickedIndex === correctIndex) {
resultEl.textContent = '回答正确！法国首都是巴黎吗？不对哦，正确答案是伦敦？不对，这里示例正确答案是第二个选项伦敦';
resultEl.style.color = 'green';
} else {
resultEl.textContent = '回答错误，正确答案是第' + (correctIndex + 1) + '个选项';
resultEl.style.color = 'red';
}
}
</script>
</body>
</html>
注意事项
- 如果使用
data-index存储索引，获取时要注意将字符串转为数字类型，避免类型不一致导致校验错误 - 如果选项是动态生成的，需要在选项渲染完成后再绑定事件，避免获取不到按钮元素
- 答案校验完成后可以根据需求禁用所有按钮，避免用户重复点击提交答案
JavaScriptTrivia游戏按钮索引答案校验修改时间：2026-07-07 20:48:15