未捕獲的型別錯誤:無法設定 null 的屬性 innerHTML 您好,我在使用 innerHTML 時出錯。我嘗試了 innerText 但它沒有用我像我一樣搜索一些問題但我沒有找到解決方案。這些是我的 html 和 javascript 檔案,你可以檢查它們,但我沒有發現任何問題。
<body>
<div class="quiz-container">
<div class="quiz-header">
<h2 id="question">Question Text</h2>
<ul>
<li>
<input type="radio" id="a" name="answer">
<label id="a_text" for="a">Question</label>
</li>
<li>
<input type="radio" id="b" name="answer">
<label id="b_text" for="b">Question</label>
</li>
<li>
<input type="radio" id="c" name="answer">
<label id="c_text" for="c">Question</label>
</li>
<li>
<input type="radio" id="d" name="answer">
<label id="d_text" for="d">Question</label>
</li>
</ul>
</div>
<button id="submit">Submit</button>
</div>
</body>
const quizData = [
{
question: "What is the most used programming language in 2019?",
a: "Java",
b: "C",
c: "Python",
d: "JavaScript",
correct: "d",
},
];
const questionEl = document.getElementById('question')
const a_text = document.getElementById('a_text')
const b_text = document.getElementById('b_text')
const c_text = document.getElementById('c_text')
const d_text = document.getElementById('d_text')
const submitBtn = document.getElementById('submit')
let currentQuiz = 0;
function loadQuiz() {
const currentQuizData = quizData[currentQuiz]
questionEl.innerHTML = currentQuizData.question
a_text.innerHTML = currentQuizData.a
b_text.innerHTML = currentQuizData.b
c_text.innerHTML = currentQuizData.c
d_text.innerHTML = currentQuizData.d
currentQuiz ;
}
loadQuiz();
uj5u.com熱心網友回復:
它看起來像document.getElementById在瀏覽器完成渲染頁面之前呼叫。
在瀏覽器準備好之后,您需要運行進入 DOM 的代碼。
uj5u.com熱心網友回復:
問題是變數questionEl被定義為const;因為您正在嘗試更改方法questionEl內變數的內容loadQuiz()。使用or關鍵字定義questionEl變數。letvar
const quizData = [
{
question: "What is the most used programming language in 2019?",
a: "Java",
b: "C",
c: "Python",
d: "JavaScript",
correct: "d",
},
];
/* The questionEl variable is defined using the "let" keyword. */
let questionEl = document.getElementById('question')
const a_text = document.getElementById('a_text')
const b_text = document.getElementById('b_text')
const c_text = document.getElementById('c_text')
const d_text = document.getElementById('d_text')
const submitBtn = document.getElementById('submit')
let currentQuiz = 0;
function loadQuiz() {
const currentQuizData = quizData[currentQuiz]
questionEl.innerHTML = currentQuizData.question
a_text.innerHTML = currentQuizData.a
b_text.innerHTML = currentQuizData.b
c_text.innerHTML = currentQuizData.c
d_text.innerHTML = currentQuizData.d
currentQuiz ;
}
loadQuiz();
<body>
<div class="quiz-container">
<div class="quiz-header">
<h2 id="question">Question Text</h2>
<ul>
<li>
<input type="radio" id="a" name="answer">
<label id="a_text" for="a">Question</label>
</li>
<li>
<input type="radio" id="b" name="answer">
<label id="b_text" for="b">Question</label>
</li>
<li>
<input type="radio" id="c" name="answer">
<label id="c_text" for="c">Question</label>
</li>
<li>
<input type="radio" id="d" name="answer">
<label id="d_text" for="d">Question</label>
</li>
</ul>
</div>
<button id="submit">Submit</button>
</div>
</body>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/416675.html
標籤:
