如何将两个JavaScript数组转换为键值对字典并传递给HTML

你的思路没问题，但两个数组的方式存在同步风险（比如不小心删了一个问题但没删对应的答案，就会导致索引不匹配）。用对象数组存储问答对是更规范的做法，每个元素绑定对应的问题和答案，维护起来更直观。

修改后的代码 #

1. 定义问答数据 #

// 用对象数组存储每一组问答，结构清晰且绑定关系明确
const qaPairs = [
  { question: "Question one", answer: "Answer one" },
  { question: "Question two", answer: "Answer two" },
  { question: "Question three", answer: "Answer three" }
];

2. 优化随机获取问题的函数 #

考虑到你需要点击另一个按钮查看答案，这里调整了逻辑，初始不显示答案，而是把选中的问答索引暂存，点击查看按钮时再显示对应答案：

// 提前缓存DOM元素，避免每次函数调用重复查询DOM
const questionInput = document.getElementById('randomQuestion');
const answerInput = document.getElementById('randomAnswer');

// 获取随机问题
function getRandomQuestion() {
  const randomIndex = Math.floor(Math.random() * qaPairs.length);
  const selectedQA = qaPairs[randomIndex];
  
  // 显示问题，清空答案
  questionInput.value = selectedQA.question;
  answerInput.value = '';
  
  // 把选中的索引存在元素的自定义属性里，方便后续获取对应答案
  questionInput.dataset.selectedIndex = randomIndex;
}

// 查看对应答案
function showAnswer() {
  const selectedIndex = questionInput.dataset.selectedIndex;
  if (selectedIndex !== undefined) {
    answerInput.value = qaPairs[selectedIndex].answer;
  }
}

额外建议 #

• 避免重复DOM查询：像上面那样提前获取DOM元素并缓存，比每次函数调用都用getElementById性能更好，尤其在频繁操作时更明显。
• 状态控制：可以给答案输入框加disabled属性，初始禁用，直到用户点击获取问题后再启用，提升交互体验。
• 扩展性：如果后续需要新增/删除问答，直接在qaPairs数组里修改即可，不用同时维护两个数组，降低出错概率。

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