Javascript 为什么我的var为null而代码不工作

我从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返回NULL，当我点击我的图像时，什么也没有发生。似乎文档选择器没有选择img的第一个出现。对不起，如果我的帖子有问题，这是我第一次在这里发帖。

---

谢谢

在img真正加载到DOM之前，您可能正在img上使用querySelector

可能的解决办法：

1在img标记声明之后，在body标记中移动脚本

2在其他标签的事件上使用代码，例如在按钮上单击

---

3您可以在脚本周围设置一个超时，使其延迟运行，同时加载DOM

最常见的原因是您发布的代码放在HTML文档正文之前。若你们移动到最后，那个将解决那个特殊的问题。不可能！！！它工作！！！谢谢你，不管是男是女，你救了我，使我免于发疯！谢谢@Shinjuo您不需要这里的属性，最好使用属性：myImage.onclick=function{myImage.src=myImage.src==='images/coding_icon.png'？'images/coding2.png'：'images/coding_icon.png'；}我不确定您对第2点的意思。但在我看来，第三点是不行的。它可能会起作用，但不会，只是不会。