遍历含嵌套数组的对象数组：选项渲染出现undefined按钮问题求助

你的问题核心是循环遍历的对象搞错了：getPossibleOptions函数里用quizArray.length（10次）作为循环终止条件，但实际应该遍历当前问题的options数组（每个问题只有4个选项），所以超出索引的部分就会显示undefined。

修复方案1：修正for循环的长度判断 #

把循环条件从i < quizArray.length改成i < quizArray[0].options.length，这样只会遍历当前问题的4个选项：

const getPossibleOptions = () => {
    // 先清空容器，避免多次点击重复添加按钮
    possibleOptions.innerHTML = '';
    const currentOptions = quizArray[0].options;
    for(let i = 0; i < currentOptions.length; i++) {
        const optionBtn = document.createElement('button');
        optionBtn.innerHTML = currentOptions[i];
        possibleOptions.append(optionBtn);
    }
}

修复方案2：用forEach遍历options数组（更直观） #

直接遍历当前问题的options数组，不需要手动管理索引，更不容易出错：

const getPossibleOptions = () => {
    // 清空容器
    possibleOptions.innerHTML = '';
    quizArray[0].options.forEach(optionText => {
        const optionBtn = document.createElement('button');
        optionBtn.innerHTML = optionText;
        possibleOptions.append(optionBtn);
    });
}

额外优化建议 #

• 在getquestions函数里也建议先清空questionContainer，避免多次点击后问题叠加显示。
• 随机排序数组的写法sort(() => 0.5 - Math.random())有概率导致排序不均匀，如果需要更公平的随机，可以用Fisher-Yates洗牌算法：

// 替换原有的sort行
for (let i = quizArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [quizArray[i], quizArray[j]] = [quizArray[j], quizArray[i]];
}

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