Javascript 脚本可以在HTML中工作，但不能在Scripts.js中工作

最近，我开始开发自己的网站，提高自己的编码知识。有了这个，我已经开始遇到很多问题，这些问题需要很长时间才能解决，但到目前为止，除了这个问题，所有问题都已经解决了

昨天，我尝试将w3schools的“模态图像”添加到我创建的图片库中，除了脚本之外，其他一切似乎都正常工作

然后我决定将脚本隔离在一个完全独立的文件中，以确保代码实际工作，并且不是我做错了什么。一开始，当整个代码都塞满了HTML时，它确实起了作用，在我将CSS从HTML中分离出来之后，这没有引起任何问题，但当我将脚本从HTML中提取到scripts.JS时，模式就完全停止了工作

由于我对javascript的知识几乎一无所知，我希望有人能对我的问题有所帮助，因为我已经完全没有想法了

这是剧本

PS：目前这是唯一一个不工作的脚本，我有其他脚本确实在同一个文件中工作，所以文件正在加载，只是这个特定的脚本工作不正常

//JavaScript文档
//获取模态
var modal=document.getElementById（“myModal”）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById（“myImg”）；
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.href=“”；
captionText.innerHTML=this.alt；
};
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
};

您的代码可能无法工作，因为在DOM准备就绪之前正在运行。请尝试以下操作：

document.addEventListener("DOMContentLoaded", ready);
if (document.readyState === "interactive" || document.readyState === "complete" ) ready();

function ready(){

// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.href ="";
  captionText.innerHTML = this.alt;
};

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
};

}

document.addEventListener（“DOMContentLoaded”，就绪）；
如果（document.readyState==“交互式”| | document.readyState===“完成”）就绪（）；
函数就绪（）{
//获取模态
var modal=document.getElementById（“myModal”）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById（“myImg”）；
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.href=“”；
captionText.innerHTML=this.alt；
};
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
};
}

可能是的副本。需要您的HTML代码来确定。这不是对问题的有用描述。学习使用浏览器中的调试工具。将

延迟

添加到您的

标记中。在浏览器上，控制台显示“未捕获类型错误：无法在script.js:10将属性“onclick”设置为null。将

延迟

添加到

标记现代JavaScript中不需要添加DOMContentLoaded处理程序。OP只需在

标签中添加

延迟

。我已经尝试在测试文件和live网站中添加延迟标签，我很高兴它已经解决了这个问题，非常感谢大家！