Javascript 当用户从下拉列表中选择时,不从JSON文件填充琐碎问题/选项
我正在尝试创建一个琐事应用程序,用户可以选择他们想回答的问题类别 我尝试编写一些函数,其中JSON文件根据从下拉列表中选择的选项加载 JSON文件会加载,但当用户单击“播放”时,它不会填充问题和选项 谢谢你的帮助 HTMLJavascript 当用户从下拉列表中选择时,不从JSON文件填充琐碎问题/选项,javascript,Javascript,我正在尝试创建一个琐事应用程序,用户可以选择他们想回答的问题类别 我尝试编写一些函数,其中JSON文件根据从下拉列表中选择的选项加载 JSON文件会加载,但当用户单击“播放”时,它不会填充问题和选项 谢谢你的帮助 HTML 看起来你实际上并没有在任何地方调用startGame 加载json后,我会将其添加到两个json解析函数中 function AnimalAsCategory () { fetch("animals.json") .then((re
看起来你实际上并没有在任何地方调用
startGame
加载json后,我会将其添加到两个json解析函数中
function AnimalAsCategory () {
fetch("animals.json")
.then((res) => {
return res.json();
})
.then((loadedQuestions) => {
questions = loadedQuestions;
startGame();
return questions
})
.catch((err) => {
console.error(err);
})
}
function FoodAsCategory() {
fetch("food.json")
.then((res) => {
return res.json();
})
.then((loadedQuestions) => {
questions = loadedQuestions;
startGame();
return questions;
})
.catch((err) => {
console.error(err);
})
}
很高兴能展示一些代码。然而,你能把问题缩小到你有问题的那一部分吗?要找到问题所在,需要阅读大量代码。对不起。我将对其进行编辑,以显示问题所在的部分occurs@Cid这有帮助吗?我的建议是调用
startGame
,因为您没有在任何地方使用它。我会在questions=loadedQuestions之后添加它代码>在两个函数中。@imvain2有效,非常感谢!
//Get the play button
const submit = document.getElementById("submit");
//Get the value for the dropdown and game
const categories = document.getElementById("categories");
const game = document.getElementById("game");
const categoriesForm = document.getElementById("categoriesForm");
let category;
function getCategory(e){
e.preventDefault();
switch(categories.value) {
case "animals":
category = "animals";
AnimalAsCategory();
break;
case "food":
category = "food";
FoodAsCategory();
break;
}
game.classList.remove("hidden");
categoriesForm.classList.add("hidden");
}
const question = document.getElementById("question");
const choices = Array.from(document.getElementsByClassName("choice-text"));
var scoreText = document.getElementById("hud-score");
let questions = [];
let currentQuestion = {};
let acceptingAnswers = false;
let score = 0;
let questionCounter = 0;
let availableQuestions = []
function AnimalAsCategory () {
fetch("animals.json")
.then((res) => {
return res.json();
})
.then((loadedQuestions) => {
questions = loadedQuestions;
return questions
})
.catch((err) => {
console.error(err);
})
}
function FoodAsCategory() {
fetch("food.json")
.then((res) => {
return res.json();
})
.then((loadedQuestions) => {
questions = loadedQuestions;
return questions;
})
.catch((err) => {
console.error(err);
})
}
startGame = () => {
questionCounter = 0;
score = 0;
lives = 3;
availableQuestions = [...questions];
getNewQuestion();
}
getNewQuestion = () => {
if(availableQuestions.length === 0 || questionCounter >= MAX_QUESTIONS) {
localStorage.setItem("mostRecentScore". score);
return window.location.assign("./end.html");
}
questionCounter++;
const questionIndex = Math.floor(Math.random() * availableQuestions.length);
currentQuestion = availableQuestions[questionIndex];
question.innerText = currentQuestion.question;
choices.forEach((choice) => {
const number = choice.dataset["number"];
choice.innerText = currentQuestion["choice" + number]
});
availableQuestions.slice(questionIndex, 1);
acceptingAnswers = true;
};
function AnimalAsCategory () {
fetch("animals.json")
.then((res) => {
return res.json();
})
.then((loadedQuestions) => {
questions = loadedQuestions;
startGame();
return questions
})
.catch((err) => {
console.error(err);
})
}
function FoodAsCategory() {
fetch("food.json")
.then((res) => {
return res.json();
})
.then((loadedQuestions) => {
questions = loadedQuestions;
startGame();
return questions;
})
.catch((err) => {
console.error(err);
})
}