Jeopardy游戏开发：forEach嵌套for循环未执行求助

问题描述 #

开发Jeopardy游戏时，尝试通过forEach遍历所有分类，再用内部for循环遍历每个分类下的题目并插入表格，但内部for循环完全不运行，控制台无任何输出，无法完成题目填充。

错误原因 #

1. for循环终止条件错误：原代码中for(let i = 0; i < category.clues[i].length; i++)的条件完全错误。category.clues[i]是单个题目对象，并不存在length属性，初始时i=0，category.clues[0].length为undefined，条件0 < undefined会被判定为false，导致循环直接跳过。
2. 表格结构逻辑错误：原代码只创建了一行，所有分类标题都插入到同一行的第一个单元格，会导致标题重叠，且没有为每个题目创建对应的行结构，不符合Jeopardy表格的布局逻辑（横向为分类，纵向为题目）。

修复方案 #

1. 修正for循环条件 #

将循环条件改为i < category.clues.length，这样才能正确遍历当前分类下的所有题目。

2. 调整表格结构逻辑 #

• 首先创建标题行，遍历所有分类，为每个分类添加一个标题单元格；
• 确定题目行数（所有分类的题目数量一致，这里取categories[0].clues.length），循环创建每一行；
• 遍历每个分类，在当前行插入对应索引的题目单元格（初始可以显示分值或者占位符，点击后显示题目/答案）。

修正后的完整代码 #

JavaScript代码 #

let categories = [
    {title: "Art",
        clues: [
            {question: "Who painted the Sistine chapel ceiling?", answer: "Michelangelo", showing: null},
            {question: "Aureolin is a shade of what color?", answer: "yellow", showing: null},
            {question: "The Parthenon Marbles are controversially located in what museum?", answer: "the British Museum", showing: null},
            {question: "What is the real title of Salvador Dali’s “melting clocks” painting?", answer: "The Persistence of Memory", showing: null},
            {question: "Which art trend became incredibly popular in 2023, although originally first appeared in the 1960s?", answer: "AI art", showing: null},
            {question: "Which of the following is NOT a painting by Salvador Dali; ‘The Temptation of St. Anthony’, ‘The Hallucinogenic Toreador’ or ‘The Sleeping Gypsy’?", answer: "The Sleeping Gypsy", showing: null}
        ],
    },
    {title: "Tech",
        clues: [
            {question: "What app has a green owl as the mascot?", answer: "Duolingo", showing: null},
            {question: "What software company is headquartered in Redmond, Washington?", answer: "Microsoft", showing: null},
            {question: "What software development hosting company has an Octocat for the logo?", answer: "GitHub", showing: null},
            {question: "What programming language is named after a type of Indonesian coffee?", answer: "Java", showing: null},
            {question: "One gigabyte is equal to how many megabytes?", answer: "1000", showing: null},
            {question: "What company made the first portable computer in 1981?", answer: "Osborne Company", showing: null}
        ],
    },
    {title: "Music",
        clues: [
            {question: "What music festival is the most iconic and highly anticipated in the world?", answer: "Lollapalooza", showing: null},
            {question: "Which pop star uses the alias 'Mrs.Doubtfire'?", answer: "Sabrina Carpenter", showing: null},
            {question: "Who released the album 'Swimming' in 2018?", answer: "Mac Miller", showing: null},
            {question: "Who is the youngest person to headline the Pyramid stage at Glastonbury?", answer: "Billie Eilish", showing: null},
            {question: "Who is the world's richest pop star?", answer: "Paul McCartney", showing: null},
            {question: "What artist was working at a summer camp as a counsellor just last year but is now a pop sensation?", answer: "", showing: null}
        ],
    },
    {title: "Nature",
        clues: [
            {question: "What is a group of crows called?", answer: "a murder", showing: null},
            {question: "Which planet has the most moons?", answer: "Saturn", showing: null},
            {question: "What is the slowest-moving mammal on earth?", answer: "a sloth", showing: null},
            {question: "Which animal sleeps the least at two hours a day on average?", answer: "an elephant", showing: null},
            {question: "What is the world's fastest growing plant?", answer: "bamboo", showing: null},
            {question: "What animal are birds descended from?", answer: "dinosaurs", showing: null}
        ],
    },
    {title: "Random",
        clues: [
            {question: "According to Greek mythology, what famed warrior died because he took an arrow to the heel?", answer: "Achilles", showing: null},
            {question: "How many dots appear on a pair of dice?", answer: "42", showing: null},
            {question: "What is the dot over a lowercase letter 'I' called?", answer: "a title", showing: null},
            {question: "Who wrote the famous novel To Kill a Mockingbird?", answer: "Harper Lee", showing: null},
            {question: "How many zip codes are in the US?", answer: "41,642", showing: null},
            {question: "What is the name of the scale used to measure spiciness of peppers?", answer: "Scoville scale", showing: null}
        ],
    },
];

function fillTable() {
    const table = document.querySelector('table');
    // 创建标题行
    const headerRow = table.insertRow();
    categories.forEach(category => {
        const headerCell = headerRow.insertCell();
        headerCell.textContent = category.title;
        headerCell.classList.add('category-header'); // 可选：添加类名用于样式
    });

    // 确定题目行数（假设所有分类题目数量一致）
    const clueCount = categories[0].clues.length;
    for (let i = 0; i < clueCount; i++) {
        const clueRow = table.insertRow();
        categories.forEach(category => {
            const clueCell = clueRow.insertCell();
            // 初始显示分值（Jeopardy风格，比如100、200...）
            clueCell.textContent = `${(i + 1) * 100}`;
            clueCell.dataset.index = i; // 存储题目索引，用于后续点击事件
            clueCell.dataset.category = category.title; // 存储分类名
            // 可选：添加点击事件切换显示题目/答案
            clueCell.addEventListener('click', () => {
                const clue = category.clues[i];
                if (clue.showing === null) {
                    clueCell.textContent = clue.question;
                    clue.showing = 'question';
                } else if (clue.showing === 'question') {
                    clueCell.textContent = clue.answer;
                    clue.showing = 'answer';
                } else {
                    clueCell.textContent = `${(i + 1) * 100}`;
                    clue.showing = null;
                }
            });
        });
    }
}

// 页面加载完成后执行填充
window.addEventListener('DOMContentLoaded', fillTable);

HTML代码（无需修改，确保引入脚本） #

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Jeopardy</title>
  <link rel="stylesheet" href="jeopardy.css">
</head>
<body>
    <h1>Jeopardy</h1>
    <table></table>
<script src="jeopardy.js"></script>
</body>
</html>

额外说明 #

• 修复后的代码不仅解决了for循环不执行的问题，还按照Jeopardy的经典布局创建了表格；
• 添加了点击单元格切换显示分值、题目、答案的交互逻辑；
• 可以通过jeopardy.css添加样式，让表格更接近Jeopardy的视觉效果（比如蓝色背景、白色字体等）。

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