Quiz应用fetchData执行后选项不显示 控制台类型错误求解

错误原因 #

你触发的这个报错核心是<select>元素的add()方法参数要求不匹配：

• HTMLSelectElement.add()方法只允许传入HTMLOptGroupElement或HTMLOptionElement类型的DOM对象
• 你当前传入的是拼接完成的HTML字符串，不符合参数类型要求，因此触发类型错误
  另外你的代码还存在一个隐藏问题：你没有提前声明html_container变量，直接调用html_container.push()会额外抛出变量未定义的报错。

修复方案 #

这里提供两种可行的修复方式，二选一即可：

方案1：创建DOM元素后调用add方法（推荐） #

直接在循环中生成option DOM对象，再传入add方法，完全符合原生API的参数要求：

// 先清空select原有选项，避免重复渲染
const selectEl = document.getElementById('choice')
selectEl.innerHTML = ''
container.forEach(function(choices) {
  const option = document.createElement('option')
  option.value = choices
  option.textContent = choices
  selectEl.add(option)
  console.log(choices)
})
// 可以删除原来的html_container相关逻辑和旧的add调用代码

方案2：用innerHTML插入拼接的HTML字符串 #

如果你更习惯用字符串拼接的方式生成选项，直接将拼接结果赋值给select元素的innerHTML即可，无需调用add方法：

// 注意使用前先声明html_container变量
let html_container = []
container.forEach(function(choices) {
  // 给value属性加双引号，避免值含特殊字符时解析错误
  html_container.push(`<option value="${choices}">${choices}</option>`)
  console.log(choices)
})
document.getElementById('choice').innerHTML = html_container.join('')

可选优化建议 #

你当前用function func(a, b) { return 0.5 - Math.random(); }打乱选项的方式存在排序不均匀的问题，如果需要更均匀的乱序效果，可以改用Fisher-Yates洗牌算法。

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