Почему getElementById возвращает null?

Question

[LevG0r]

Код такой html такой:
<p id = "test_id"> текст </p>
JS:

let new_id = document.getElementById('test_id');
console.log(new_id);

Почему в консоли возвращается значение null?

Comments

[Lara B]

мне вернул див

[Lara B]

попробуйте кэш очитстить

[Dima Polos]

html сохранили?

[V Sh.]

У вас точно console.log вызывается сразу же за инициализацией new_id? Возможные варианты:
1) let объявлена внутри блока (за блоком начинается другая область видимости и переменная недоступна)
2) на момент инициализации new_id в документе (html) не существует блока с заданным айди.

[LevG0r]

Lara B, почистил, но чёт не работает. Через codepen пробовал -- всё идёт. Хз что делать.

[LevG0r]

V Sh., js отдельным файлом идёт. Таких же id на html-странице нет.

[painmaker]

попробуйте сменить название переменной. Дайте более лаконичное имя. Возможно, данное имя уже где-то инициировано в скриптах

[LevG0r]

painmaker, ничего не изменилось.

[p3trukh1n]

LevG0r, попробуй засунуть в

document.onload = function() {
// Твой код
}

Возможно, код исполняется до загрузки страницы

[LevG0r]

p3trukh1n,

document.onload = function() {
    let text = document.getElementById("new_id");
    console.log(text);
}

Нет результата.

Answer 1

[Yura Homa]

js поставь в конец html документа перед закрывающим body, должно заработать

Comments

[MaksMATGMAT]

Спасибо, помогло main.js перед

Answer 2

[axelofan]

Скорее всего эта строка выполняется когда браузеры ещё не загрузил Html и построил DOM.
Попробуй обернуть их в событие DOMContentLoaded.

Answer 3

[SagePtr]

Потому что в атрибутах в HTML пробелы по краям от = не ставятся, парсер воспринимает их как три разных атрибута. Должно быть так:
<p id="test_id"> текст </p>
(и то здесь сомнения, зачем окружать слово "текст" пробелами, некрасиво же будет)

Comments

[LevG0r]

Нет результата.

[SagePtr]

LevG0r, всё есть) https://codepen.io/SagePtr/pen/EBMZox