Javascript 当用户从下拉列表中选择时,不从JSON文件填充琐碎问题/选项

Javascript 当用户从下拉列表中选择时,不从JSON文件填充琐碎问题/选项,javascript,Javascript,我正在尝试创建一个琐事应用程序,用户可以选择他们想回答的问题类别 我尝试编写一些函数,其中JSON文件根据从下拉列表中选择的选项加载 JSON文件会加载,但当用户单击“播放”时,它不会填充问题和选项 谢谢你的帮助 HTML 看起来你实际上并没有在任何地方调用startGame 加载json后,我会将其添加到两个json解析函数中 function AnimalAsCategory () { fetch("animals.json") .then((re

我正在尝试创建一个琐事应用程序,用户可以选择他们想回答的问题类别

我尝试编写一些函数,其中JSON文件根据从下拉列表中选择的选项加载

JSON文件会加载,但当用户单击“播放”时,它不会填充问题和选项

谢谢你的帮助

HTML


看起来你实际上并没有在任何地方调用
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);
        })
}