在構建我的第一個 JS 測驗時遇到問題
[英]Having trouble in building my first JS quiz
問題描述
我是 JS 的完全初學者。 我正在嘗試使用 JS 進行測驗，但不斷出現此錯誤。 有人可以幫忙嗎？
這是我的 HTML：
<body>
<div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>
</body>
這是我的 JS 代碼：
var myQuestions = [
{
question: "What is 10/2?",
answers: {
a: '3',
b: '5',
c: '115'
},
correctAnswer: 'b'
},
{
question: "What is 30/3?",
answers: {
a: '3',
b: '5',
c: '10'
},
correctAnswer: 'c'
}
];
var quizContainer = document.getElementById("quiz");
var resultsContainer = document.getElementById("results");
var submitButton = document.getElementById("submit");
function generateQuiz(questions, quizContainer, resultsContainer, submitButton){
function showQuestions(questions, quizContainer){
// we'll need a place to store the output and the answer choices
var output = [];
var answers;
// for each question...
for(var i=0; i<questions.length; i++){
// first reset the list of answers
answers = [];
// for each available answer to this question...
for(letter in questions[i].answers){
// ...add an html radio button
answers.push(
'<label>'
+ '<input type="radio" name="question'+i+'" value="'+letter+'">'
+ letter + ': '
+ questions[i].answers[letter]
+ '</label>'
);
}
// add this question and its answers to the output
output.push(
'<div class="question">' + questions[i].question + '</div>'
+ '<div class="answers">' + answers.join('') + '</div>'
);
}
// finally combine our output list into one string of html and put it on the page
quizContainer.innerHTML = output.join('');
}
function showResults(questions, quizContainer, resultsContainer){
}
// show the questions
showQuestions(questions, quizContainer);
// when user clicks submit, show results
submitButton.onclick = function(){
showResults(questions, quizContainer, resultsContainer);
}
}
generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
我在我的控制台中收到此錯誤。 它表明它無法設置 null 元素的innerHTML屬性，即使我已經定義了它。
這是我認為問題所在的行：
quizContainer.innerHTML = output.join('');
4 個解決方案
解決方案1
0 2020-10-07 06:57:40
可能的原因是你在 HTML 之前寫了你的 js。試着把你的腳本放在你的正文部分下面。 您需要首先呈現您的 div，然后您的腳本將通過 id 在您的頁面上找到它。
解決方案2
0 2020-10-07 07:02:56
在window.onload中編寫您的 JS 代碼。 它只會在 DOM 元素准備就緒時運行。 使用以下代碼片段：
window.onload = function() {
// quiz code goes here...
};
解決方案3
0 已采納 2020-10-07 07:05:25
當瀏覽器加載頁面並遇到<script>標簽時，此時它會執行腳本，不會繼續構建 DOM。 因此，您在腳本中引用的元素此時不存在。
最好的方法是讓腳本在window.onload中顯式執行generateQuiz並隱藏變量。 這將腳本中所需的 function 的加載和執行分開，並在實際執行回調（測驗的生成）時為您提供明確的控制。
window.onload = function() {
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
}
另一種方法是使用defer以便在完全構建 DOM 后運行腳本：
<!doctype html>
<html>
<head>
<script defer src="script.js"></script>
</head>
<body>
<div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>
</body>
</html>
或者只是將腳本放在所引用的元素下方：
<!doctype html>
<html>
<body>
<div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>
<script src="script.js"></script>
</body>
</html>
解決方案4
0 2020-10-07 07:36:24
我在showResults function 中添加了 js 代碼，所以現在您將獲得結果。
var myQuestions = [ { question: "What is 10/2?", answers: { a: '3', b: '5', c: '115' }, correctAnswer: 'b' }, { question: "What is 30/3?", answers: { a: '3', b: '5', c: '10' }, correctAnswer: 'c' } ]; var quizContainer = document.getElementById("quiz"); var resultsContainer = document.getElementById("results"); var submitButton = document.getElementById("submit"); function generateQuiz(questions, quizContainer, resultsContainer, submitButton){ function showQuestions(questions, quizContainer){ // we'll need a place to store the output and the answer choices var output = []; var answers; // for each question... for(var i=0; i<questions.length; i++){ // first reset the list of answers answers = []; // for each available answer to this question... for(letter in questions[i].answers){ //...add an html radio button answers.push( '<label>' + '<input type="radio" name="question'+i+'" value="'+letter+'"> ' + letter + ': ' + questions[i].answers[letter] + '</label>' ); } // add this question and its answers to the output output.push( '<div class="question">' + questions[i].question + '</div>' + '<div class="answers">' + answers.join('') + '</div>' ); } // finally combine our output list into one string of html and put it on the page quizContainer.innerHTML = output.join(''); } function showResults(questions, quizContainer, resultsContainer){ var array = []; var checkboxes = document.querySelectorAll('#quiz input[type=radio]:checked'); for (var i = 0; i < checkboxes.length; i++) { array.push(checkboxes[i].value) } resultsContainer.innerHTML = array; } // show the questions showQuestions(questions, quizContainer); // when user clicks submit, show results submitButton.onclick = function(){ showResults(questions, quizContainer, resultsContainer); } } generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
.answers{ margin-top: 2px; margin-bottom: 10px; } label{ margin-right:15px; } #results{ font-weight: 900; font-size: 17px; margin-left: 15px; color: green; display: inline-block; }
<div id="quiz"></div> <button type="button" id="submit">Get Results</button> <div id="results"></div>
無法將我的答案與我的測驗問題聯系起來
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.