document.querySelector() возвращает null

Question

    <div id="leftside">
        <ul>
            <li><button id="G1">G1</button></li>
            <li><button id="G2">G2</button></li>
            <li><button id="G3">G3</button></li>
            <li><button id="G4">G4</button></li>
            <li><button id="G5">G5</button></li>
        </ul>
    </div>

По какой-то причине попытка выбрать кнопки через JS, а затем применить их с addEventListener возвращает ошибку, что переменные равны null

const BG1 = document.querySelector("#G1");
const BG2 = document.querySelector("#G2");
const BG3 = document.querySelector("#G3");
const BG4 = document.querySelector("#G4");
const BG5 = document.querySelector("#G5");

Ошибка: Uncaught TypeError: BG1 is null

Answer 1

Возможно страница еще не успевает загрузиться, как код уже отрабатывает. Надо писать код после загрузки контента с помощью window.onload, к примеру, или DOMContentLoaded

document.addEventListener("DOMContentLoaded", onDocumentReady);

function onDocumentReady() {
    .. TODO Smthn
}

БЛОГ НА HUSL

document.querySelector() возвращает null

Ответы (1 шт):