为什么if...else仅能匹配单个词值？带空格的答案对比失败如何解决

问题根因 #

你在动态生成<option>选项时，没有给value属性的值加上引号包裹。当答案内容包含空格时（比如United States），浏览器会将空格前的部分识别为value的有效值，空格后的内容会被当作未知属性直接丢弃，最终你通过document.getElementById('choice').value拿到的选中值只有空格前的半截，自然和完整的正确答案匹配失败。而单个词的答案没有空格，所以不会触发这个问题。

你打印answer_container和选中值看起来一致，是因为你打印的是原始的正确答案变量，而实际拿到的select_answer是被截断的，你可以加一行console.log(select_answer, answer_container)在比较前就能看到差异。

修复方案 #

修改动态生成<option>的代码，给value属性加上引号包裹：

// 原来的错误代码
html_container.push(`
<option value=${choices}>
${choices}
</option>
`)

// 修改为以下代码
html_container.push(`
<option value="${choices}">
${choices}
</option>
`)

可选优化 #

为了避免API返回的答案或者选项内容前后存在不可见空白字符导致匹配失败，你可以在比较时对两个值统一做去首尾空格处理：

if (select_answer.trim() === answer_container.trim()) {
  // 答对逻辑
}

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