类型错误：无法设置空值的“textContent”属性。

Question

我最近遇到了这段代码的问题，不管我怎么检查，都会出现错误。

错误都是一样的：

TypeError: Cannot set property 'textContent' of null

无论是使用querySelector还是getElementById都会出现此错误，我不确定是我的HTML有问题还是我输入有误。

让我困惑的是，代码在这里能够正常运行，但当我在VSC（Visual Studio Code）上运行它并在Chrome浏览器中查看时，就会出现此错误。这是我的代码有问题还是VSC的问题？

var dice = Math.floor(Math.random()* 6) +1;

document.querySelector("#current-0").textContent = dice;

<div class="wrapper clear-fix">
    <div class="player1-panel active">
        <div class="player-name" id="player-1">Player 1</div>
        <div class="player-score" id="score-1">100</div>
        <div class="player-current-box">
            <div class="player-current-label">Current</div>
            <div class="player-current-score" id="current-0">11</div>
         </div>
    </div>

        <div class="player2-panel">
            <div class="player-name" id="player-2">Player 2</div>
            <div class="player-score" id="score-2">00</div>

            <div class="player-current-box">
                <div class="player-current-label">Current</div>
                <div class="player-current-score" id="currentScore-2">00</div>
            </div>
        </div>
        <button class="btn-rules"><i class="material-icons">
                help</i>Rules</button>
        <button class="btn-newGame"><i class="material-icons">
                add_circle_outline
            </i>New Game</button>
        <button class="btn-rollDice"><i class="material-icons">
                autorenew</i>Roll dice</button>
        <button class="btn-hold"><i class="material-icons">
                play_for_work</i>Hold</button>

        <input type="text" placeholder="Goal" class="finalScore">
        <img src="images/dice5.png" atl="dice" class="dice" id="dice1">
        <img src="images/dice5.png" atl="dice" class="dice" id="dice2">

</div>

- Evie

---

你的示例似乎运行良好。 - Icehorn

可能是时机问题。当JS在document.querySelector("#current-0").textContent = dice;这一行时，暂停JS，并检查#current-0是否实际存在于DOM中。 - Jason Pelletier

整个脚本在哪里，对应的<script>标签在HTML中又在哪里？ - Ry-

https://dev59.com/TmYr5IYBdhLWcg3wAFk1 - epascarello

@Icehorn，这就是令人困惑的地方，它在 Stack Overflow 上运行良好，但在我通过 VSC 和 Chrome 运行时出现错误。 - Evie

你的脚本标签是否放在HTML内容之后？它可能会在元素实际上在DOM中之前运行。 - Icehorn

Answer 1

你可能有一个调用了初始值为null，然后稍后解决的东西。所以尝试这个...

var element = document.querySelector("#current-0")
if (element) {
    element.textContent = dice
}

- Sandra Willford

---

你目前的想法很接近答案，但是如果把这段代码和原来的代码放在同一个地方，它只会消除错误而不是解决问题（if检查会失败，因此无法正确设置textContent）。 - GregL