Question

我正在学习JavaScript，我正在使用Atom（文本编辑器）。在我的HTML文件中，我只得到了这个：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello Plunker!</h1>
    <button id="displayTodosButton">Display Todos</button>
    <button>Toggle Todos</button>
</body>
</html>

在我的javascript文件中，我只是想使用以下方法访问“显示待办事项”按钮：

var displayTodosButton = document.getElementById('displayTodosButton')

我正在观看视频，导师正在使用plnkr.co，他正好访问了按钮，但在Atom上我得到了“ReferenceError：文档未定义”

我该如何解决这个问题？

Answer 1

然后在Atom上我得到了

如果您的意思是Atom，您的文本编辑器正在突出显示它并向您显示document未定义的警告，那就是Atom没有意识到您在浏览器上下文中运行该代码将定义document。

它可能有一个设置，您可以告诉它您将在浏览器中运行代码，因此它可以采用默认的全局变量集（window，document等）

如果script.js中的代码正是您所显示的内容，虽然错误Atom显示您不会有问题（因为在浏览器中，document不会是{{1 }}，您将从undefined返回null，因为您的代码在元素存在之前运行。同样，这假设代码是独立的，而不是（比如说）在getElementById处理程序或类似代码中。

除非你有充分的理由去做（并且没有多少），否则将DOMContentLoaded元素放在script中是一种反模式。将它们放在head中，最后放在结束body标记之前。这样，在代码运行之前，浏览器就会创建它们上面定义的任何元素。

Answer 2

您已尝试使用Node.js尝试执行JS文件的某些菜单选项或组合键。

但是，您的代码旨在使用Web浏览器提供的API运行，嵌入到网页中。

在这种情况下，Web浏览器将提供document对象。 Node.js不会。

您需要在网络浏览器中打开HTML文档。 open in browser扩展程序可能很有用。

您可以使用每个主要浏览器提供的开发者工具查看任何错误报告。

（注意：您将遇到的第一个错误由this question and answer解释。）

Answer 3

看起来您正在尝试使用atom中的“script”包（在NodeJS上下文中）运行JS代码。你真正想做的是在你的网络浏览器中运行它。所以只需在您喜欢的浏览器中打开index.html，看看魔术:)

Answer 4

这不是Atom的问题。您在加载DOM之前正在调用script.js ，因此文档未定义。

使用以下代码将您的代码包装在script.js文件中：

$(document).ready(function() { $(function () { //Do my stuff }); });

或调用html文档末尾的script.js文件，如下所示：

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello Plunker!</h1> <button id="displayTodosButton">Display Todos</button> <button>Toggle Todos</button> <script src="script.js"></script> </body> </html>

未从document.getElementById定义获取文档

4 个答案: