我正在尝试制作一个危险边缘游戏，我需要将问题添加到表格中。我首先使用 forEach 循环遍历所有类别，然后我想在 forEach 循环内部使用 for 循环...
我正在尝试制作一个危险边缘游戏，我需要将问题添加到表格中。我首先使用 forEach 循环遍历所有类别，然后我想在 forEach 循环内使用 for 循环遍历所有线索问题。我被这个问题困扰了一段时间。我认为使用 forEach 循环是有意义的，我只是很困惑为什么 for 循环根本没有运行。
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 worlds 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 worlds 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 row = table.insertRow();
categories.forEach( category => {
const title = row.insertCell(0);
title.innerHTML = category.title;
for(let i = 0; i < category.clues[i].length; i++){
console.log(category.clues[i])
// const clue = row.insertCell
// clue.innerHTML = category.clues[i]
}
})
}
<!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>
这里有两个问题：
1.- 正如@Joel Lefkowitz 提到的，您定义了函数 fillTable 但 从未调用它。 要解决这个问题，只需在您的 javascript jeopardy.js 中添加一行代码。
function fillTable() {
const table = document.querySelector('table');
const row = table.insertRow();
categories.forEach( category => {
const title = row.insertCell(0);
title.innerHTML = category.title;
for(let i = 0; i < category.clues[i].length; i++){
console.log(category.clues[i])
// const clue = row.insertCell
// clue.innerHTML = category.clues[i]
}
})
}
// This will execute your new function
fillTable();
2.- 您没有正确循环线索。
修复代码如下：
category.clues.forEach(clue => {
// Here you can access your question
console.log(clue.question);
// Here you can access your answer
console.log(clue.answer);
// Here you can access your showing property
console.log(clue.showing);
});
您遇到的问题是，您尝试以 category.clues[i].length ，但需要注意的是，索引 \'i\' 不是必需的，因为您已经位于类别内。这就是为什么要获取长度，您只需访问 clues 属性，例如 category.clues.length 或使用 foreach，如代码所示。
非常感谢！我没有调用该函数，因为我要添加一个按钮来启动游戏，然后调用它。我不知道如何使用 forEach 来循环线索，因为我没有使用正确的语法。非常感谢您的帮助。
