本文讲解如何利用数组索引一致性，将问题数组与答案数组动态绑定，并实现用户文本输入的实时校验，适用于多题型交互式测验开发。
本文讲解如何利用数组索引一致性，将问题数组与答案数组动态绑定，并实现用户文本输入的实时校验，适用于多题型交互式测验开发。
在构建基于数组的问题-答案交互式测验时，核心逻辑在于保持问题与答案在各自数组中位置（索引）严格对齐。你已正确初始化了 questionsList 和 correctAnswer 两个等长数组，且约定：questionsList[i] 对应的正确答案是 correctAnswer[i]。但当前 checkIfRightAnswer(index) 函数未被传入有效的 index 值，导致无法定位目标答案——这是问题的根本原因。
✅ 正确做法：显式传递当前题目索引
你需要在显示题目时，同步记录或传递当前题目的索引（例如 currentQuestionIndex），而非依赖 questionsList.indexOf(question.value)（该写法错误：question.value 是日语词如 "体調"，而 DOM 元素 #question 的值通常为空或未设置，indexOf 必然返回 -1）。
推荐采用以下结构化实现：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
// 初始化状态
let currentQuestionIndex = 0;
const questionsList = ["体調", "体温", "病気", /* ... */];
const correctAnswer = ["たいちょう", "たいおん", "びょうき", /* ... */];
// 显示当前题目
function showQuestion() {
const questionEl = document.getElementById("question");
const feedbackEl = document.getElementById("feedback");
if (currentQuestionIndex = questionsList.length) return;
if (userInput === correctAnswer[currentQuestionIndex]) {
feedbackEl.style.color = "seagreen";
feedbackEl.textContent = "C'est juste!";
currentQuestionIndex++; // 进入下一题
setTimeout(showQuestion, 800); // 短暂延迟后切换
} else {
feedbackEl.style.color = "red";
feedbackEl.textContent = "Mauvaise réponse, réessayez encore une fois!";
// 注意：此处不递增索引，允许重试同一题
}
}
// 绑定事件（HTML 中按钮需有 onclick="checkIfRightAnswer()"）
document.getElementById("submit-btn").addEventListener("click", checkIfRightAnswer);
⚠️ 关键注意事项
-
不要用
indexOf()反查索引：题目内容（如"体調"）是展示用的，不应作为查找依据；索引应由程序逻辑主动维护（如currentQuestionIndex）。 -
避免空格干扰：使用
.trim()清除用户输入首尾空格，防止"たいちょう "被误判为错误。 -
边界防护：校验前检查
currentQuestionIndex是否越界，防止访问correctAnswer[18]（数组长度为 18 时最大合法索引是 17）。 -
else if (!correctAnswer[index])是冗余逻辑：只要index在有效范围内，correctAnswer[index]永远存在（非undefined或null）；应直接用else处理错误情况。
✅ 总结
关联问题与答案的本质，是用同一个整数索引同时访问两个平行数组。与其让程序“猜测”哪个问题是当前题，不如由状态变量（currentQuestionIndex）明确驱动流程。这种模式清晰、可扩展、易调试，也是实现顺序答题、计分、跳题等功能的基础。掌握此模式后，你即可轻松扩展支持提示、计时、错题回顾等高级特性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
