Почему моя переменная равна нулю, а код не работает

Question

Я начинаю с основ в JS и пытаюсь сделать свое первое событие, изменить изображение, если оно щелкнуло, но оно не работает, где проблема?

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/coding_icon.png') {
      myImage.setAttribute ('src','images/coding2.png');
    } else {
      myImage.setAttribute ('src','images/coding_icon.png');
    }
}

Мой var myImage return NULLи ничего не происходит, когда я нажимаю на свое изображение. Кажется, селектор doc ... не выбирает первое появление img. Извините, если я сделал что-то не так с постом, я впервые публикую здесь. Спасибо

Answer 1

Возможно, вы используете querySelector на img до того, как он действительно загрузится в DOM.

Возможные решения:

1) переместите ваш скрипт в теге body после объявления тега img.

2) использовать код для событий других тегов, например, при нажатии кнопки

3) вы можете поместить тайм-аут вокруг сценария так, чтобы он выполнялся с задержкой, а DOM может быть загружен между тем