为什么我的 var 是 null 并且代码不起作用

Question

I'm starting with the basics in JS and I try to make my first event, change the image if it clicked but it's not working, where's the prob?

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');
    }
}

My var myImage return NULL and nothing happen when I click on my image. It seems that the doc...selector don't select the first occur of img. Sorry if I did something wrong with the post, it's my first time posting here. Thanks

Answer 1

You are probably using querySelector on img before it really loaded into DOM.

Possible solutions:

1) move your script in the body tag after the img tag declaration.

2) use code on event of other tags, for eg on a button click

3) you can put a timeout surrounding script so that it run delayed and DOM can be loaded meanwhile