Таймер обратного отсчета: невозможно установить для свойства textContent значение null

У меня есть некоторые ошибки с небольшим скриптом обратного отсчета. Не могу найти здесь решение. Сообщение об ошибке выдает 1 ошибку каждую секунду:

Uncaught TypeError: Cannot set property 'textContent' of null
at (index):181
(anonymous) @ (index):181
setInterval (async)
(anonymous) @ (index):179

Это сценарий для таймера:

<script type="text/javascript">

var timeleft = 45;
var downloadTimer = setInterval(function(){

timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
document.getElementById("countdowntimer").style.color = "white";

if(timeleft <= 0)
    clearInterval(downloadTimer);
},1000);

</script>

javascript web timer countdown
person DasNerdwork    schedule 03.09.2018    source источник
comment
Что такое textContent элемент в HTML?   -  person Ankit Agarwal    schedule 03.09.2018
comment
В DOM нет элемента с идентификатором countdowntimer.   -  person Andreas    schedule 03.09.2018
comment
Возможный дубликат Почему не находит ли элемент jQuery или метод DOM, например getElementById?   -  person Andreas    schedule 03.09.2018
comment
Вы уверены, что в вашем документе есть элемент с таймером обратного отсчета идентификатора? Если это так, возможно, он еще не загружен, возможно, попробуйте окружить свой код document.addEventListener("DOMContentLoaded", function(event) { //CODE }   -  person Sam    schedule 03.09.2018
comment
<div class="timer">Refreshing in <span id="countdowntimer">45</span class="timer"> seconds</div> - это то место, где я пытаюсь загрузить сценарий. Он работает, но создает эти ошибки   -  person DasNerdwork    schedule 03.09.2018
comment
Ваш script после или до HTML?   -  person ᔕᖺᘎᕊ    schedule 03.09.2018

Ответы (1)


arrow_upward
0
arrow_downward

Ваш html (согласно вашему комментарию) недействителен (</span class="timer">). Кроме того, код можно упростить.

countDownForNOfTicks(5);

function countDownForNOfTicks(nOfTicks) {
  document.querySelector("#countdowntimer").textContent = nOfTicks--;
  // [do more things if necessary]
  if (nOfTicks >= 0) {
    return setTimeout(() => countDownForNOfTicks(nOfTicks), 1000);
  }
  return refresh();
}

function refresh() {
  document.querySelector("div.timer").textContent += " DONE";
}
<div class="timer">Refreshing in 
 <span id="countdowntimer">45</span> seconds
</div>

person KooiInc    schedule 03.09.2018
comment
Большое спасибо за быстрый и простой ответ, который по-прежнему вызывает ошибку, но только один раз. - person DasNerdwork; 03.09.2018