内部js工作正常但外部不行

Question

JS SNIPPETS

如果在外部js中维护相同的代码，那么相同的代码在<script>标记内部工作

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文件移至底部来解决此问题。