在 HTML 页面中显示 Javascript 对象的问题答案

【问题标题】：Issues with displaying Javascript objects in an HTML page在 HTML 页面中显示 Javascript 对象的问题
【发布时间】：2021-03-23 13:54:47
【问题描述】：

我正在尝试使用 Javascript 创建一个问答游戏。我遇到的问题是问题和答案的 Js 对象没有显示在我的 HTML 页面中。我的主要问题在于 showQuestions 函数。任何帮助将不胜感激。非常感谢。

请在下面找到我的代码。

 const startButton = document.getElementById("start");
 const timerEl = document.getElementById("timer");
 const questionEl = document.getElementById("question");
 const ul = document.getElementById("answers");
 const resultEl = document.getElementById("result");
 let currentQuestionIndex = 0;
 let seconds = 60;
 let interval;

 const questions = [{
     question: "How many megabytes are there in 1 Gigabytes?",
     answers: [{
         answer: "1000",
         isCorrect: false
       },
       {
         answer: "100",
         isCorrect: false
       },
       {
         answer: "10,000",
         isCorrect: true
       }

     ],
   },
   {
     question: "what is C#?",
     answers: [{
         answer: "A procedural language",
         isCorrect: false
       },
       {
         answer: "An object-oriented language",
         isCorrect: true
       },
       {
         answer: "a functional programming language",
         isCorrect: false
       }

     ],
   },

   {
     question: "What do you call a group of memory location containing the same data type?",
     answers: [{
         answer: "A loop",
         isCorrect: false
       },
       {
         answer: "Data structure",
         isCorrect: false
       },
       {
         answer: "Array",
         isCorrect: true
       }
     ],
   },

   {
     question: "In C++ which keyword must you use to display and anser on the screen?",
     answers: [{
         answer: "printf",
         isCorrect: true
       },
       {
         answer: "printout",
         isCorrect: false
       },
       {
         answer: "msgout",
         isCorrect: false
       }
     ],
   },

   {
     question: "Which keyword do you use in C# to declare variables?",
     answers: [{
         answer: "let",
         isCorrect: false
       },
       {
         answer: "Dim",
         isCorrect: true
       },
       {
         answer: "var",
         isCorrect: false
       }
     ],
   },
 ];


 function startTimer() {
   timerEl.textContent = seconds;
   interval = setInterval(function() {
     seconds--;
     timerEl.textContent = seconds;
     if (seconds === 0) {
       clearInterval(interval);
     }
     //renderTime is called here once every second
   }, 1000);
 }

 function onButtonClick() {
   const value = this.getAttribute("value");
   if (value === "true") {
     resultEl.textContent = "correct";
   } else {
     resultEl.textContent = "incorrect";
   }
   currentQuestionIndex++;
   if (currentQuestionIndex === questions.length) {
     questionEl.textContent = "FINISH";
   } else {
     showQuestions(questions[currentQuestionIndex]);
   }
 }

 function showQuestions(question) {

   questionEl.textContent = question.question;

   //Loop through each questions and answers
   question.answers.forEach((currentAnswer) => {


     const li = document.createElement("li");
     const button = document.createElement("button");
     button.setAttribute("value", currentAnswer.isCorrect);
     button.textContent = currentAnswer.answer;
     button.addEventListener("click", onButtonClick);
     li.appendChild(button);
     ul.appendChild(li);
   })
 }

 function startGameQuiz() {
   startTimer();
   showQuestions(questions[currentQuestionIndex]);
 }
 startButton.addEventListener("click", startGameQuiz);

<html>
    <header class="header">
        <strong>
            <a>010101</a>
        </strong>
        <span id="timer" class="quizzTimer">Time: 0</span>
    </header>
    <body>
        <h1>Computer Science Quiz</h1>
        <br>
            <h5>
                <p>Welcome to  the Computer Science quiz session.</p>
            </h5>
            <!--Display questions and answers-->
            <div id="quiz"></div>
            <button id="start">Start quiz</button>
            <div id="result"></div>
        </body>
        <script src="script.js"></script>
    </html>

【问题讨论】：

1024 MB (1 GB)。
@Vbudo 可以。 Kilo、Mega 和 Giga 通常是 SI，即 1000。Kibi、Mebi 和 Gibi 可以为二进制 1024。这有点乱。
执行代码时您的 html 可能尚未准备好，因此您的引用为空。将您的初始化代码添加到 onload 事件中。
NicSlash 感谢您的意见。我将在 onload 事件中添加一个 init。

标签： javascript html object display

【解决方案1】：

const startButton = document.getElementById("start");
const timerEl = document.getElementById("timer");
const questionEl = document.getElementById("question"); 
const ul = document.getElementById("answers");
const resultEl = document.getElementById("result");

只要您的页面元素中没有具有上述 id 的元素，您就无法引用它们。例如，您的 questionE1 常量始终为 null，因为您的页面中没有具有此 ID 的元素。

【讨论】：

感谢阿德里安的快速回复。我会去。返回并查看我的元素并确保它们与我的 javascript 文件正确链接。非常感谢。

【解决方案2】：

你的 HTML 标签应该是这样的：

    <div id="quiz"></div>
    <button id="start">Start quiz</button>
    <div id="question"></div>
    <ul id="answers"></ul>
    <div id="result"></div>

缺少的标签是问题和答案，这会在 js 端出现错误，因此它会阻止您的问题被显示，但这不是您代码中唯一的错误，我试过了，您必须在用户清除列表后回答问题。

请在附件中找到屏幕截图。

祝你好运！

execution screen shot

【讨论】：

塔哈非常感谢您的反馈。它绝对有效。我现在将在每个问题之后清理列表。
欢迎，所以请将此答案标记为已接受，祝您好运（y），如果您需要帮助，我仍然可以使用