javascript - 内部 js 工作正常，但外部没有

Question

JS 片段

相同的代码在 <script> 内部运行标记如果在外部 js 中维护相同的代码不起作用

var modal = document.getElementById('myModal');
var img = document.getElementById('home2');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
    modal.style.display = "none";
}

Answer 1

存在差异的原因是，在外部文件中，您的代码在浏览器完全解析 DOM 之前执行，因此您试图以编程方式访问浏览器尚不知道的页面元素。这正是大多数人已经说过的，但让我详细说明一下。所以你的 javascript 在页面上有元素之前执行。您可以通过使用 $(document).ready(function(){...}); 或将外部 javascript 文件移至底部来解决此问题。