如何通过点击按钮重启JavaScript测验？解决按钮点击报错问题

错误原因分析 #

用户完成最后一题后，state.currentQuestionIndex会被更新为questions.length（示例中数组长度为3，所以索引值为3）。此时点击Play按钮调用showQuestion(state.currentQuestionIndex)，会尝试访问questions[3]——但数组索引从0开始，该位置无对应元素，返回undefined，后续代码访问question.question时就会触发“无法读取undefined的属性”错误。

修复方案 #

点击Play按钮时，需要重置测验状态并重新启动流程，修改Play按钮的点击事件处理函数如下：

playBtn.addEventListener('click', ()=>{
    // 重置测验状态：回到第一题，分数清零
    state.currentQuestionIndex = 0;
    state.score = 0;
    // 清空上一轮的分数显示
    scoreBoard.innerHTML = "";
    // 显示第一题
    showQuestion(state.currentQuestionIndex);
    // 恢复Next按钮显示，隐藏Play按钮
    nBtn.style.display = 'block';
    playBtn.style.display = 'none';
});

修复说明 #

• 重置state.currentQuestionIndex为0：让测验从第一题重新开始
• 重置state.score为0：避免新测验累计上一轮的分数
• 清空scoreBoard：隐藏上一轮的结果，保证界面整洁
• 恢复Next按钮显示：让用户可以正常切换后续题目
• 隐藏Play按钮：避免在测验进行中误触重启

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