js 适用于 codepen 但不适用于本地文件答案

【问题标题】：js works in codepen but not local filesjs 适用于 codepen 但不适用于本地文件
【发布时间】：2020-07-25 17:41:25
【问题描述】：

我正在尝试通过单击外部模式来关闭它。它在 codepen 上的笔内工作正常，但在 codepen 项目或本地文件中却不行。我错过了什么？

我的 HTML 文件中的标头代码是：

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <title></title>
</head>

不确定是否需要导入 jQuery，但我在此处阅读的有关此主题的大多数答案都指示添加它。有无结果都一样。

而我的整个 js 文件只是：

var modal = document.getElementById('id01');

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

我也试过把js直接放在HTML文件的script标签里，也没有运行。

<script type="text/javascript">
    var modal = document.getElementById('id01');

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

这是完整代码：https://codepen.io/phoenixparker/pen/KKVExJG

【问题讨论】：

在body标签结束前添加脚本而不是head标签。
不在本地工作？然后检查控制台是否有错误
控制台显示没有错误，改变脚本是在正文还是头部没有区别
可能modal 是null，因为您在HTML 文件中实际<div id="id01"> 元素之前的某个位置调用document.getElementById('id01')，因此当您尝试引用它时它还不存在.你确定你把它放在身体的结束，而不是开始吗？请在onclick 函数中设置断点并单步执行代码并检查modal 和event.target 的值以查看发生了什么。实际上，我感觉好像你需要相反的东西 - if (event.target !== modal) - 另外，如果用户在子元素上单击模态内部的某个地方怎么办？
把它放在body标签的底部是有效的！非常感谢！我不确定如何将其标记为已回答，因为这是评论而不是答案。

标签： javascript html

【解决方案1】：

似乎也可以在这里工作，您编码正确。也许你打错了id？

var modal = document.getElementById('id01');

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

&lt;div id="id01"&gt;here&lt;/div&gt;

【讨论】：

【解决方案2】：

您应该检查您的<script type="text/javascript" src="script.js"></script>file 的位置。您可能将此文件与您打开的页面不在同一目录中，因此无法加载它。在谷歌浏览器中按 Ctrl+Shift+I 并检查控制台是否有任何错误。检查您的脚本位置是否与您正在打开的页面相关。

【讨论】：

它在同一个目录中，但我也测试过将它放在自己的目录中并将路径更改为/js/script.js或./js/script.js。没有从控制台收到任何错误。
那么你应该开始逐步调试：1）在点击事件上分配简单的事件，如console.write或window.alert，在这里你可以检查你是否捕捉到点击事件2）然后通过小步骤开始添加代码，例如获取、存储和显示数据，然后您就会发现问题出在哪里。