TypeError: Cannot set property 'textContent' of null

Question

Currently having issues with this code for a while, and I keep getting errors no matter how much i check it out.

The errors are all the same:

when i'm using querySelector or when i'm using getElementById as well. I don't know if it's my HTML or if i'm imputing it wrong.

what i'm getting confused in is it works here... but the error pops up when i'm using my VSC (visual studio code) and running it on chrome, the error shows up. Is it my code or the 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>

It might be a timing issue. Pause the JS when it is at ```document.querySelector("#current-0").textContent = dice;``` and see if the ```#current-0``` is actually in the DOM. — Jason Pelletier, Feb 26 '19 at 00:30
What’s the entire script and where’s the corresponding ` — Ry-, Feb 26 '19 at 00:32
https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Feb 26 '19 at 00:33
@Icehorn, that's what's connfusing, it's workinngn here in stack overflow, but the error shows up when i'm running it through VSC and Chrome. — Evie, Feb 26 '19 at 00:34
Is your script tag below the html content? It could be running before the elements are actually in the DOM — Icehorn, Feb 26 '19 at 00:35

score 7 · Accepted Answer · answered Feb 26 '19 at 00:29

7

You have something that is calling this initially and getting a null value and then resolving later i think. So try this...

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

answered Feb 26 '19 at 00:29

Sandra Willford

3,459
11
49
96

2

You're on the right track, but all this code will do if put in the same place as the original code is eliminate the error, not solve the problem. (The `if` check will fail, and thus not set the `textContent` correctly). – GregL Feb 26 '19 at 00:32

TypeError: Cannot set property 'textContent' of null

1 Answers1