Question

无法设置空属性（设置‘innerHTML’）

2022-01-20

571

javascript html innerhtml

未捕获的类型错误：无法将属性 innerHTML 设置为 null 您好，我遇到了 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();

Answer 1

看起来好像在浏览器完成呈现页面之前调用了 document.getElementById 。

您将需要在浏览器准备就绪后立即运行转到 DOM 的代码。

Answer 2

问题在于变量 questionEl 被定义为 const ；因为您试图在 loadQuiz() 方法中更改变量 questionEl 的内容。使用 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>