18910140161

JavaScript-为什么js不更新HTML页面中的数据?-堆栈溢出

顺晟科技

2022-10-19 12:43:56

57

我正在做一个问答游戏,但我的HTML页面没有被JavaScript更新。 我还认为json没有加载。

在此图像中,可以代替虚拟问题和答案,但它们没有加载到主页中。 我认为innerHTML没有在主HTML页上加载我的数据。


顺晟科技:

您应该在主体之后移动,如果脚本在页面之前加载,它就不能访问DOM元素。 并且有一些语法错误

在第27行, 应该是

var quizData = [
    {
        question: "Who discovered charge as positive and negative?",
        a: "Benjamin Franklin",
        b: "Narendra Modi",
        c: "Abdul Kalam",
        d: "Lalu Yadav",
        correct: "a",
    },
    {
        question: "Which charge is free to move?",
        a: "negative",
        b: "postive",
        c: "both a and b",
        d: "none of the above",
        correct: "a",
    },
];

var quiz=document.getElementById("quiz");
var answerEls=document.querySelectorAll(".answer");
var questionEl=document.getElementById("question");
var a_text=document.getElementById("a_text");
var b_text=document.getElementById("b_text");
var c_text=document.getElementById("c_text");
var d_text=document.getElementById("d_text");
var submitBtn=document.getElementById("submit");

let currentQuiz = 0;
let score = 0;

loadQuiz();

function loadQuiz(){
    deselectAnswers();

    var currentQuizData = quizData[currentQuiz];

    questionEl.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;
    d_text.innerText = currentQuizData.d;
}

function getSelected() {
    let answer = undefined;
    answerEls.forEach((answerEl) => {
        if (answerEl.checked) {
            answer = answerEl.id;
        }
    });

    return answer;
}

function deselectAnswers(){
    answerEls.forEach((answerEl) => {
        answerEl.checked = false;
    });
}

submitBtn.addEventListener("click", () => {
    var answer = getSelected();

    if(answer){
        if(answer === quizData[currentQuiz].correct) {
            score++;
        }
        currentQuiz++;
        if(currentQuiz < quizData.length) {
            loadQuiz();
        } else { 
        quiz.innerHTML = `
        <h2> You answered correctly at $(score)/${quizData.length} questions.</h2>
        <button onclick="location.reload()">Reload</button> 
        `;
        }
       }
});

在第74行,将字符串括在反勾(`)中以使用模板文本

var quizData = [
    {
        question: "Who discovered charge as positive and negative?",
        a: "Benjamin Franklin",
        b: "Narendra Modi",
        c: "Abdul Kalam",
        d: "Lalu Yadav",
        correct: "a",
    },
    {
        question: "Which charge is free to move?",
        a: "negative",
        b: "postive",
        c: "both a and b",
        d: "none of the above",
        correct: "a",
    },
];

var quiz=document.getElementById("quiz");
var answerEls=document.querySelectorAll(".answer");
var questionEl=document.getElementById("question");
var a_text=document.getElementById("a_text");
var b_text=document.getElementById("b_text");
var c_text=document.getElementById("c_text");
var d_text=document.getElementById("d_text");
var submitBtn=document.getElementById("submit");

let currentQuiz = 0;
let score = 0;

loadQuiz();

function loadQuiz(){
    deselectAnswers();

    var currentQuizData = quizData[currentQuiz];

    questionEl.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;
    d_text.innerText = currentQuizData.d;
}

function getSelected() {
    let answer = undefined;
    answerEls.forEach((answerEl) => {
        if (answerEl.checked) {
            answer = answerEl.id;
        }
    });

    return answer;
}

function deselectAnswers(){
    answerEls.forEach((answerEl) => {
        answerEl.checked = false;
    });
}

submitBtn.addEventListener("click", () => {
    var answer = getSelected();

    if(answer){
        if(answer === quizData[currentQuiz].correct) {
            score++;
        }
        currentQuiz++;
        if(currentQuiz < quizData.length) {
            loadQuiz();
        } else { 
        quiz.innerHTML = `
        <h2> You answered correctly at $(score)/${quizData.length} questions.</h2>
        <button onclick="location.reload()">Reload</button> 
        `;
        }
       }
});

此处更正源代码

在js文件中

元素初始化后,应该移动到body标记的底部。

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航