.innerHTML not appending correctly

Question

I have set up a loop that is supposed to add 1 to the "generation" to keep track of each iteration of the loop. Generations being the count. But the number is not being appended at all instead the contents of the "counter-display" stay the same. I keep getting the same error "cannot set property 'innerHTML' of null

function evolve() {
   
  let evolutionNumber = 0;
    
     createNextGen();// Apply the rules
     updateCurrGen();// Set Current values from new generation
     updateWorld();// Update the world view

     if (started) {
        timer = setTimeout(evolve, evolutionSpeed);
        for (i = -1; i < evolutionNumber; i++) {
            evolutionNumber++;
            document.getElementById("#counter-display").innerHTML = evolutionNumber;
        }
    }
}

window.onload=()=>{
    createWorld();// The visual table
    createGenArrays();// Current and next generations
    initGenArrays();//Set all array locations to 0=dead
}

<body>
        <div id="world">

        </div>
        <div>
            <input type='button' id='btnstartstop' value='Start Reproducing' 
            onclick='startStopGol();'/>
            <input type='button' id='btnreset' value='Reset World' 
            onclick='resetWorld();'/>
            <h1 id="counter-display">(..)</h1>
        </div>
        <script src="gol.js"></script>
    </body>
</html>

sorry if this wasnt enough information just let me know if theres anything more information needed and ill adjust the post accordingly.

`=` overwrites; `+=` appends. Is that what you’re looking for? — Sebastian Simon, Apr 02 '21 at 23:07
First, you should **never** modify `innerHTML` in a loop as this will cause numerous repaints and reflows. But, because your loop keeps overwriting the same element, all you are ever going to see is the final value of the variable when the loop is done. Also, because you aren't declaring your loop variable, it's becoming Global. You should declare it with `let` to have block scope within the loop. — Scott Marcus, Apr 02 '21 at 23:30
And, because your timer is recursive, the act of recursion essentially becomes the looping action and so no formal loop is needed. Just keep track of your counter by scoping it outside of the timer function and check its value within the timer function. — Scott Marcus, Apr 02 '21 at 23:32

ray hatfield · Accepted Answer · 2021-04-02T23:21:29.073

2

#counter-display isn't the ID. counter-display is the ID. Remove the # so it's document.getElementById("counter-display").innerHTML

Once that's fixed you have a different problem: your loop will never exit. You're testing whether i is still less than evolutionNumber, but you're incrementing evolutionNumber at the same time. So i will always be less and your loop will never exit.

let evolutionNumber = 0;
for (i = -1; i < evolutionNumber; i++) {
   evolutionNumber++;
}

edited Apr 02 '21 at 23:21

answered Apr 02 '21 at 23:08

ray hatfield

16,302
4
25
21

didnt work. now it just gives me an error. ive been using both interchangeably. ive seen people use #, ., or nothing at all and none of them work. – Dallin Atnip Apr 02 '21 at 23:13
1

So this answered your question but now you have a different question? – ray hatfield Apr 02 '21 at 23:16
no this didnt answer my question. That may have been an issue the result is i get an error. – Dallin Atnip Apr 02 '21 at 23:17
1

Is it a different error? Your question was about why you're getting "can't set innerHTML of null". – ray hatfield Apr 02 '21 at 23:20
now whats happening is that my code in the webpage will stall for a few seconds doing nothing then it will give me a error when i attempt to refresh the page. No errors occur in the debug console. Could this mean that its running infinitely and not letting any other code run? edit: i see the update to your post now, thankyou that helped. – Dallin Atnip Apr 02 '21 at 23:32

.innerHTML not appending correctly

1 Answers1