Невозможно установить свойство 'className' для null и id внутри идентификатора

Question

Невозможно установить свойство 'className' для null и id внутри идентификатора

1

Я получаю ошибку Cannot set property 'className' of null при попытке установить имя класса в JS. Мой JS выглядит так:

setInterval(function(){
  $.get('/price',function(data) {
      document.title = '($${data.price}) The Price';
      document.getElementById("p4").innerHTML = '$${data.change}';
      document.getElementById("p4").className = "increase";
      document.getElementById("p5").className = "triangle-down";
  });
}, 30000);

Строка в HTML:

<h1 class="decrease" id="p4">$5<i class="triangle-up" id="p5"></i></h1>

Я всегда получаю ту же ошибку. Однако, если я прокомментирую строку ниже, она работает:

document.getElementById("p4").innerHTML = '$${data.change}';

Что я здесь делаю неправильно?

Kex 28 июль 2017, в 17:37

Источник

0

Какие библиотеки вы используете?
Jacque Goupil 28 июль 2017, в 15:21
0

Почему document.getElementById("p4").className = "increase" вместо $("#p4").addClass("increase") ?
Jeremy Thille 28 июль 2017, в 15:23
0

Скорее всего, вы запускаете JavaScript до завершения загрузки DOM. Убедитесь, что вы размещаете свой код внизу HTML-кода или оборачиваете его в обратный вызов события «DOMContentLoaded».
Scott Marcus 28 июль 2017, в 15:23
0

Когда вы вызываете свою функцию JavaScript? Невозможно установить свойство 'className' для null означает, что document.getElementById ("p4") возвращает null или, другими словами, что в вашей DOM нет элемента с идентификатором "p4". Это может произойти, потому что $ .get () является асинхронной функцией и вызывается до полной загрузки DOM.
Nils Schlüter 28 июль 2017, в 15:23
0

Ребята, этот код находится в setInterval, он запускается через 30 секунд ...
Jeremy Thille 28 июль 2017, в 15:24
0

@JeremyThille Это не гарантирует, что DOM будет полностью загружен к тому времени. Должен, но это не гарантия.
Scott Marcus 28 июль 2017, в 15:25
0

Простым тестом было бы добавить console.log(document.getElementById("p4")); к первой строке кода в функции $.get() и посмотрите, что это такое.
Scott Marcus 28 июль 2017, в 15:26
0

Я думаю, что нам не нужна полная загрузка DOM с изображениями и прочим. Нам нужна HTML-разметка, и, если не будет 800 миллиардов строк, а у пользователя соединение 56k, оно будет присутствовать задолго до 30 секунд.
Jeremy Thille 28 июль 2017, в 15:28
0

@JeremyThille DOMContentLoaded срабатывает, когда DOM создан и находится в памяти. load ожидает завершения загрузки всех ресурсов.
Scott Marcus 28 июль 2017, в 15:30

Показать ещё 7 комментариев

Теги:

javascript

css

4 ответа

Ещё вопросы

Какие библиотеки вы используете?
Почему document.getElementById("p4").className = "increase" вместо $("#p4").addClass("increase") ?
Скорее всего, вы запускаете JavaScript до завершения загрузки DOM. Убедитесь, что вы размещаете свой код внизу HTML-кода или оборачиваете его в обратный вызов события «DOMContentLoaded».
Когда вы вызываете свою функцию JavaScript? Невозможно установить свойство 'className' для null означает, что document.getElementById ("p4") возвращает null или, другими словами, что в вашей DOM нет элемента с идентификатором "p4". Это может произойти, потому что $ .get () является асинхронной функцией и вызывается до полной загрузки DOM.
Ребята, этот код находится в setInterval, он запускается через 30 секунд ...
@JeremyThille Это не гарантирует, что DOM будет полностью загружен к тому времени. Должен, но это не гарантия.
Простым тестом было бы добавить console.log(document.getElementById("p4")); к первой строке кода в функции $.get() и посмотрите, что это такое.
Я думаю, что нам не нужна полная загрузка DOM с изображениями и прочим. Нам нужна HTML-разметка, и, если не будет 800 миллиардов строк, а у пользователя соединение 56k, оно будет присутствовать задолго до 30 секунд.
@JeremyThille DOMContentLoaded срабатывает, когда DOM создан и находится в памяти. load ожидает завершения загрузки всех ресурсов.

peter.stankowski · Answer 1 · 2017-07-28T13-33-00.000Z

Вы меняете внутри своего тега h1:

document.getElementById("p4").innerHTML = '$${data.change}';

что является результатом:

'$${data.change}'

убедитесь, что указанная выше переменная перенастраивает следующий html: (edit: я означает следующий формат)

<h1 class="decrease" id="p4">$5<i class="triangle-up" id="p5"></i></h1>

p4 не проблема, p5 есть, и поскольку p5 находится внутри p4, он теряется после .innerHTML, который я изменил, не так ли?

qiAlex · Answer 2 · 2017-07-28T13-18-00.000Z

Объяснение внутри кода

setInterval(function(){
  $.get('/price',function(data) {
      document.title = '($${data.price}) The Price';
      // Step by step:    
      // You change innerHTML of id=p4, but your new html might not 
      // contents the <i class="triangle-up" id="p5"></i>
      document.getElementById("p4").innerHTML = '$${data.change}';

      // you changing class of p4 this is ok
      document.getElementById("p4").className = "increase"

      // you are trying to change class of p5, but two lines above you
      // replaced it by $${data.change} that probably don't contains 
      // div with id=p5 and it looks like there is no more div id=p5 on the page
      // that also explains why everything is ok if you comment this line
      document.getElementById("p5").className = "triangle-down"
  });
}, 30000);

jfroy · Answer 3 · 2017-07-28T14-17-00.000Z

Возможно, у вас есть недостающие полуколоны. в конце двух назначений className?

Daniele Dolci · Answer 4 · 2017-07-28T13-38-00.000Z

Можно попробовать:

document.getElementById("p4").classList.remove('decrease');
document.getElementById("p4").classList.add('increase');
document.getElementById("p5").classList.remove('triangle-up');
document.getElementById("p5").classList.add('triangle-down');