Question

在我的HTML中，我定义了一个简单的按钮，如下所示：

<button id="toggleButton">Stop</button>

我想用以下代码抓住它：

buttonElement = document.getElementById("toggleButton");

目标是为其分配一个事件，如下所示：

buttonElement.onclick = stopTextColor();

问题是getElementById返回null，即使我可以在DOM中看到它。我在这里做错了什么？

为清楚起见，我在http://cdpn.io/sqEuH

发布了完整的代码

Answer 1

在关闭<body>标记之前尝试放置脚本。运行脚本时，DOM可能未完全加载。

另外，我认为你的Javascript中有错误。它应该是

buttonElement.onclick = stopTextColor;

而不是

buttonElement.onclick = stopTextColor();

尽管它不应该抛出任何错误，这是一种很好的做法。

如果你想在<body>之前保留你的Javascript，你可以使用一个监听器来等待加载DOM，然后执行你的脚本，如下所示：

window.addEventListener("DOMContentLoaded", function() {
  buttonElement = document.getElementById("toggleButton");
  buttonElement.onclick = stopTextColor;
}, false);

<强> [编辑]

上面的代码段在IE中不起作用＆lt; 9.如果您需要支持它，请改用document.load，它应该给出相同的结果，如下所示：

document.onload = function() {
  buttonElement = document.getElementById("toggleButton");
  buttonElement.onclick = stopTextColor;
}

除了浏览器兼容性之外，两者之间的区别在于window.addEventListener("DOMContentLoaded", function() {...}将在加载DOM时触发，但window.load将在DOM AND 所有其他资源时触发（加载图像，样式表等）（较慢，在您的情况下不需要）。

Answer 2

问题可能在于你将JS包括在内。发生了什么事情是JS在页面加载之前运行，因此按钮不会显示。在</body>标记之前将其移至右侧，此问题将得到解决，或使用window.onload()事件进行包装。

Answer 3

您发布的代码将起作用，除非javascript无法访问给定的DOM元素。

主要可能性：

javascript在解析DOM之前运行（IE如果你在文档的头部运行它而没有任何代码指示它等到DOM准备就绪）

你通常可以通过将脚本放在身体的底部而不是头部或身体的中途来解决这个问题。这里要理解的基本要素是JS在浏览器解析DOM之前无法访问元素。浏览器自上而下解析HTML，JS脚本自上而下运行，所以如果你在解析元素之前运行JS，它就不能用于javascript函数了。
javascript在无法访问元素的环境中运行（例如在iFrame内）。在这种情况下，问题是元素是否真的在＆＃34;文件＆＃34;你指的是对象。如果元素位于iFrame中，则它将位于iFrame的文档对象下方。

Javascript没有找到带ID的Button

3 个答案: