Javascript 未定义从document.getElementById获取文档_Javascript_Html_Atom Editor

Javascript 未定义从document.getElementById获取文档

javascript html atom-editor

Javascript 未定义从document.getElementById获取文档,javascript,html,atom-editor,Javascript,Html,Atom Editor,我正在学习JavaScript，我正在使用Atom（文本编辑器）。在我的HTML文件中，我只得到以下内容： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <h1>Hello

我正在学习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>

我正在看一个视频，讲师正在使用，他很好地访问了按钮，但在Atom上我得到了“ReferenceError:文档未定义”

我怎样才能解决这个问题

然而在原子上我得到了

如果您的意思是Atom，您的文本编辑器，正在高亮显示它，并向您显示一条警告，说明

文档

未定义，那就是Atom没有意识到您正在定义

文档

的浏览器上下文中运行该代码

它可能有一个设置，您可以告诉它您将在浏览器中运行代码，因此它可以假定默认的全局设置（

窗口

，

文档

，等等）

如果

script.js

中的代码就是您所显示的代码，尽管错误原子显示您不会成为问题（因为在浏览器中，

文档

不会是

未定义的

），您将从

getElementById

null

，因为您的代码在元素存在之前运行。同样，这是假设代码是独立的，而不是（比如）在

DOMContentLoaded

处理程序或类似程序中

除非你有充分的理由这样做（而且没有太多），否则将

script

元素放入

head

是一种反模式。将它们放入

正文

，就在末尾，就在结束标记之前。这样，在它们上面定义的任何元素都将在代码运行之前由浏览器创建

然而在原子上我得到了

如果您的意思是Atom，您的文本编辑器，正在高亮显示它，并向您显示一条警告，说明

文档

未定义，那就是Atom没有意识到您正在定义

文档

的浏览器上下文中运行该代码

它可能有一个设置，您可以告诉它您将在浏览器中运行代码，因此它可以假定默认的全局设置（

窗口

，

文档

，等等）

如果

script.js

中的代码就是您所显示的代码，尽管错误原子显示您不会成为问题（因为在浏览器中，

文档

不会是

未定义的

），您将从

getElementById

null

，因为您的代码在元素存在之前运行。同样，这是假设代码是独立的，而不是（比如）在

DOMContentLoaded

处理程序或类似程序中

除非你有充分的理由这样做（而且没有太多），否则将

script

元素放入

head

是一种反模式。将它们放入

正文

，就在末尾，就在结束标记之前。这样，上面定义的任何元素都将在代码运行之前由浏览器创建。

您点击了一些菜单选项或组合键，试图使用Node.JS执行JS文件

但是，您的代码设计为使用web浏览器提供的API运行并嵌入到web页面中

在这种情况下，Web浏览器将提供

文档

对象。Node.js将不会

您需要在web浏览器中打开HTML文档。扩展可能有用

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

（注意：您将遇到的第一个错误解释为）。

您点击了一些菜单选项或组合键，试图使用Node.JS执行JS文件

但是，您的代码设计为使用web浏览器提供的API运行并嵌入到web页面中

在这种情况下，Web浏览器将提供

文档

对象。Node.js将不会

您需要在web浏览器中打开HTML文档。扩展可能有用

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

（注意：您将遇到的第一个错误解释为）。

看起来您正在尝试使用atom中的“script”包（位于NodeJS上下文中）运行JS代码。实际上，您要做的是在web浏览器中运行它。因此，只要在您喜爱的浏览器中打开

index.html

，就可以看到神奇之处：）

看起来您正在尝试使用atom中的“script”包（在NodeJS上下文中）运行JS代码。实际上，您要做的是在web浏览器中运行它。因此，只要在您最喜欢的浏览器中打开

index.html

，就可以看到神奇之处：）

脚本在头部，元素在主体中，因此脚本可能在元素可用之前运行，但这只会给您

null

，而不是您描述的错误。@T.J.Crowder一个简单的IDE/文本编辑器“在Atom上我得到了”您的意思是您的编辑器高亮显示代码中的一行，并警告您

文档

未定义？不是浏览器在这么做吗？@T.J.Crowder是的，它只发生在运行代码的Atomtry上，检查控制台，看看它是否说的是相同的，或者它是否真的工作脚本在头部，元素在主体中，因此脚本可能在元素可用之前运行，但这只会给您

null

，不是您描述的错误。@T.J.Crowder是一个简单的IDE/文本编辑器“但在Atom上我得到了”您的意思是您的编辑器高亮显示代码中的一行，并警告您

文档

未定义？不是说浏览器正在这样做吗？@T.J.Crowder是的，它只发生在运行代码的Atomtry上，请检查控制台，看看它是否显示相同的内容，或者它是否实际工作

var displayTodosButton = document.getElementById('displayTodosButton')