document.getElementById is null inside setTimeout

Question

I have a similar issue to Property of `this` is undefined inside a setTimeout where I'm losing a reference inside a setTimeout, but in my case I'm not using this and am already using an in-line arrow function.

I want to clear a series of 22 divs with a brief delay between each, sort of like knocking over a line of dominoes. When I do it without a delay it works fine:

function restart() {
  for (var j = 1; j < 23 ; j++) {
    document.getElementById('cabin'+j+'description').innerHTML = '';
  }
}

However when I try to add a timeout:

function restart() {
  for (var j = 1; j < 23 ; j++) {
    setTimeout(() => {
      document.getElementById('cabin'+j+'description').innerHTML = '';
    }, 50);
  }
}

It fails with "Cannot set property 'innerHTML' of null"

Any insight would be appreciated.

setTimeout inside loop will not work the way you think it would, the loop finishes almost instanteously and all your setTimeout functions called together 50ms after that — Anurag Srivastava, Apr 14 '20 at 15:21
You will essentially be looking for id `cabin23description`, 22 times — Anurag Srivastava, Apr 14 '20 at 15:24
do it like this ``` function restart() { var j = 1; var task = setInterval(() => { document.getElementById('cabin' + j++ + 'description').innerHTML = ''; if(j === 23) { clearInterval(task); } }, 50); } ``` — Saadi Toumi Fouad, Apr 14 '20 at 15:38
Thank you everyone for the quick responses. @SaymoinSam thanks works great! — wilkinsm, Apr 14 '20 at 16:38
@Anurag thanks yes I figured the loop was running instantaneously but did not understand a fix. — wilkinsm, Apr 14 '20 at 16:44

score 1 · Answer 1 · answered Apr 14 '20 at 15:25

1

the problem is that when the function was executed, the variable j no longer exists, because it was executed after 50 ms, and the cycle to end much earlier

answered Apr 14 '20 at 15:25

Reynier Rivero

2,042
2
8
12

document.getElementById is null inside setTimeout

1 Answers1