使用Jprompt实现单词匹配游戏答案展示功能时返回空值如何解决？

问题根因 #

• 获取到的e_inputs、d_inputsDOM节点集合未写入elArray、dlArray，这两个数组全程为空，循环不会执行
• 循环逻辑错误：i初始值设为numberOfInputs，判断条件为i < elArray.length，空数组长度为0，循环直接跳过，answer不会被赋值
• 代码中使用的text变量未提前声明，会触发引用错误，导致函数执行中断
• 需确认全局变量numberOfInputs已正确赋值，值为配对项的总数量

修复后代码 #

// 初始化答案变量
var answer = '';
// 可直接从DOM获取配对总数，无需手动维护numberOfInputs
const numberOfInputs = document.querySelectorAll("[id^='el']").length;

function show_answer() {
  // 获取所有key和description元素
  const e_inputs = document.querySelectorAll("[id^='el']");
  const d_inputs = document.querySelectorAll("[id^='dl']");
  // 转换为数组并取出对应内容，输入框取value，普通元素取textContent
  let elArray = Array.from(e_inputs).map(item => item.value || item.textContent);
  let dlArray = Array.from(d_inputs).map(item => item.value || item.textContent);
  const title = document.getElementById('title_input').value;
  
  // 每次调用先清空旧答案，避免重复拼接
  answer = '';
  // 修正循环逻辑，i从0开始遍历所有配对项
  for (let i = 0; i < numberOfInputs; i++) {
      answer += `${elArray[i]}:${dlArray[i]}\n`;
  }
  jAlert(answer, 'Correct Match');
}

可选优化 #

如果配对项是动态生成的，可直接用数组长度作为循环终止条件，无需维护numberOfInputs变量：

for (let i = 0; i < elArray.length; i++) {
  answer += `${elArray[i]}:${dlArray[i]}\n`;
}

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