Почему Uncaught TypeError: Cannot set property 'onclick' of nul?

Question

[Виктор Давтян]

Есть страница. К ней подключены стили и скрипты

<script src='/js/jquery-3.5.1.min.js'></script>
<script src='/js/chat-main.js'></script>
<script src='/js/chat-cosmetics.js' defer></script>

В скрипте я получаю некий элемент chat-hello-message через

var chat_hello_message = document.getElementById('chat-hello-message');

, chat-hello-message выводится через js в этом же скрипте.

Сам вывод блока:

function chatHelloMessage() {
  var audio = new Audio();
  var body = document.getElementById('body');
  audio.src = '/audio/chat-new-message.mp3';
  audio.autoplay = true;
  body.innerHTML += "<div class='chat-hello-message-box' id='chat-hello-message-box'><p class='chat-hello-message chat-message' id='chat-hello-message'>Здравствуйте! Вам нужна помощь? Мы всегда рядом! Просто нажмите на кнопку в правом нижнем углу, чтобы задать вопрос.</p></div>";
}

Далее я через

chat_hello_message.onclick = function () {
  chat_hello_message.style.display = 'none';
  setTimeout(function () {
    chat_hello_message.innerHTML = "";
  }, 2000);
}

скрываю блок при клике по нему, а потом через 2 секунды очищаю содержимое блока. В итоге я получаю

Uncaught TypeError: Cannot set property 'onclick' of nul

(не null, а nul).

Кстати, при alt + click в VS code скрипты открываются из HTML.

Вопрос 1: В чём может быть проблема?
Вопрос 2: в чём отличия nul и null? Литература? В поисковике я, что забавно, ничего не нашёл.

UPD 12.07.2020: Ошибка

chat-cosmetics.js:7 
Uncaught TypeError: Cannot set property 'onclick' of null

осталась, +

chat-main.js:11 
Uncaught TypeError: Cannot read property 'addEventListener' of null

.

Проверил всё ЕЩЁ раз, нигде не пропущены буквы. Всё в порядке. проверял через поиск. В коде, который работал на JS fiddle браузер улетает с ошибкой. Уж не знаю как это.

Answer 1

[Михаил]

вы явно где-то потеряли вторую l
document.getElementById('chat-hello-message') вернуло null, значит на момент вызова функции, элемента ещё нет в DOm

Comments

[Виктор Давтян]

Вторую l

? Где? Ещё раз просмотрел, вроде бы всё в порядке.

[Виктор Давтян]

Да, действительно. Функции не было в DOM'е. Благодарю Вас!

Answer 2

[Andrew]

Смотрите, никаких ошибок и всё работает?

Uncaught TypeError: Cannot set property 'onclick' of nul

Вы где-то потратили одну конечную "l".
Браузерный компилятор сказал вам, что в контексте попытки присваивания onclick'a нет переменной chat_hello_message.
Может, вы где-то "замкнули" область видимости, внутри которой определена эта самая chat_hello_message
Вот так попробуйте

document.getElementById('chat-hello-message').onclick = function () {
  chat_hello_message.style.display = 'none';
  setTimeout(function () {
    chat_hello_message.innerHTML = "";
  }, 2000);
}

С этим кодом будет ошибка, либо такая же, либо на строке со стилем ниже
Если идентичная ошибка, значит при навешивании, этого блока еще не существует в DOM

Comments

[Виктор Давтян]

Да, действительно. Функции не было в DOM'е. Благодарю Вас!