无法设置 null 的属性（设置“innerHTML”）
[英]Cannot set properties of null (setting 'innerHTML')
问题描述
Uncaught Typeerror: Cannot set property innerHTML of null Hello, I am taking an error with innerHTML.
未捕获的类型错误：无法设置 null 的属性 innerHTML 您好，我的 innerHTML 出现错误。 I tried innerText but it did not work i search some question as like me but i did not find the solution.我尝试了 innerText 但它没有用我像我一样搜索一些问题但我没有找到解决方案。 These are my html and javascript files u can check them but i didn't find any proplem.这些是我的 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();
2 个解决方案
解决方案1
0 2022-01-20 11:41:18
It's look like document.getElementById is called before the browser finish to render the page.它看起来像document.getElementById在浏览器完成渲染页面之前被调用。
You will need to run the code that go to the DOM just after the browser is ready.在浏览器准备好之后，您需要将 go 的代码运行到 DOM。
解决方案2
0 2022-01-20 11:46:05
The problem is that the variable questionEl is defined as const ;问题是变量questionEl被定义为const ； because you are trying to change the content of the variable questionEl inside the loadQuiz() method.因为您试图在loadQuiz()方法中更改变量questionEl的内容。 Define the questionEl variable using the let or var keywords.使用let或var关键字定义questionEl变量。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.