JavaScript в CountUp отображает консольную ошибку «Цель [CountUp] равна нулю или не определена» - PullRequest
Новая
       9

JavaScript в CountUp отображает консольную ошибку «Цель [CountUp] равна нулю или не определена»

0 голосов
/ 04 октября 2018

Я новичок в CountUp.js и хочу использовать его для оптического подсчета числа.

В следующем скрипте (это все, что у меня есть до сих пор) вы можете увидеть, как CountUp.js становится связаннымв начале.CountUp.js находится в папке "js", которая находится в том же каталоге, что и файл со следующим кодом.После этого запускается JavaScript, который определяет параметры для CountUp.Затем запускается новый экземпляр CountUp-Instance, который имеет идентификатор «num0» и конечное значение счетчика «150» в конечное время обработки «5» секунд.Следующая строка просто управляет поведением CountUp, запускаясь только при отсутствии ошибки.

И вот проблема: консоль сообщает, что есть ошибка, и ошибка: [CountUp] target is null or undefined

Я проверил несколько google-записей, которые описывают ошибки, такие как

  • Неправильный идентификатор, используемый в javascript
  • Неправильный src-атрибут атрибута script-tag
  • Неправильные параметры-формат

`

<html>
  <head>
    <script src="./js/countup.js" type="text/javascript"></script>
    <script>
      var options = {
        useEasing: true, 
        useGrouping: true, 
        separator: ',', 
        decimal: '.', 
      };
      var demo0 = new CountUp('num0', 0, 150, 0, 5, options);
      if(!demo0.error){demo0.start();}else{console.error(demo0.error);}
    </script>
  </head>
  <body>
    <span id="num0">0</span>
  </body>
</html>

`

Я не знаю, что я делаю неправильно.Было бы очень хорошо, если бы кто-нибудь мог мне помочь.Спасибо!

1 Ответ

0 голосов
/ 04 октября 2018

Это сработало для меня после упаковки, чтобы оно работало только после загрузки DOM.Сценарий выполнялся до загрузки HTML-элемента, поэтому цель была нулевой.Вы также можете переместить скрипт ниже элемента HTML.

Обернуть его: 

document.addEventListener('DOMContentLoaded', function() {
var options = {
    useEasing: true,
    useGrouping: true,
    separator: ',',
    decimal: '.',
};
var demo0 = new CountUp('num0', 0, 150, 0, 5, options);
if (!demo0.error) {
    demo0.start();
} else {
    console.error(demo0.error);
}}, false);

ИЛИ ниже элемента 

<html>
  <head>
    <script src="./js/countup.js" type="text/javascript"></script>
  </head>
  <body>
    <span id="num0">0</span>
    <script>
      var options = {
        useEasing: true, 
        useGrouping: true, 
        separator: ',', 
        decimal: '.', 
      };
      var demo0 = new CountUp('num0', 0, 150, 0, 5, options);
      if(!demo0.error){demo0.start();}else{console.error(demo0.error);}
    </script>
  </body>
</html>
...