Javascript TypeError 为空？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12611983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError is Null?
提问by L84
This is an error in Firebug I keep seeing.
这是我一直看到的 Firebug 中的错误。
TypeError: $("#gallery-nav-button") is null
[Break On This Error]
$('#gallery-nav-button').addClass('animated fadeOutRightBig');
Here is my code:
这是我的代码：
JS
JS
$(function() {
$("#close-gallery-nav-button").click(function() {
$('#gallery-nav-button').addClass('animated fadeOutRightBig');
});
});
HTML
HTML
<div id="gallery-nav-button">
<h4 id="close-gallery-nav-button">X</h4>
<h3 class="text-center small-text"><a class="inline text-center small-text" href="#gallery-nav-instruct">Click Here for Gallery <br /> Navigation Instructions.</a></h3>
</div>
CSS
CSS
#close-gallery-nav-button{
text-indent:-9999px;
width:20px;
height:20px;
position:absolute;
top:-20px;
background:url(/images/controls.png) no-repeat 0 0;
}
#close-gallery-nav-button{background-position:-50px 0px; right:0;}
#close-gallery-nav-button:hover{background-position:-50px -25px;}
回答by Andrew Koper
I also want to add - because this is the #1 Google search result for the important error message "TypeError: [x] is null" - that the most common reason a JavaScript developer will get this is that they are trying to assign an event handler to a DOM element, but the DOM element hasn't been created yet.
我还想补充一点——因为这是重要错误消息“TypeError: [x] is null”的排名第一的谷歌搜索结果——JavaScript 开发人员得到这个的最常见原因是他们试图分配一个事件DOM 元素的处理程序，但尚未创建 DOM 元素。
Code is basically run from top to bottom. Most devs put their JavaScript in the head of their HTML file. The browser has received the HTML, CSS and JavaScript from the server; is "executing"/rendering the Web page; and is executing the JavaScript, but it hasn't gotten further down the HTML file to "execute"/render the HTML.
代码基本上是从上到下运行的。大多数开发人员将他们的 JavaScript 放在他们的 HTML 文件的头部。浏览器已从服务器接收到 HTML、CSS 和 JavaScript；正在“执行”/呈现网页；并且正在执行 JavaScript，但它没有进一步深入 HTML 文件以“执行”/呈现 HTML。
To handle this, you need to introduce a delay before your JavaScript is executed, like putting it inside a function that isn't called until the browser has "executed" all of the HTML and fires the event "DOM ready."
为了解决这个问题，你需要在你的 JavaScript 执行之前引入一个延迟，比如将它放在一个函数中，直到浏览器“执行”所有 HTML 并触发“DOM 就绪”事件时才会调用该函数。
With raw JavaScript, use window.onload:
使用原始 JavaScript，使用 window.onload：
window.onload=function() {
/*your code here*
/*var date = document.getElementById("date");
/*alert(date);
}
With jQuery, use document ready:
使用 jQuery，使用文档就绪：
$(document).ready(function() {
/*your code here*
/*var date = document.getElementById("date");
/*alert(date);
});
This way, your JavaScript won't run until the browser has built the DOM, the HTML element exists (not null :-) ) and your JavaScript can find it and attach an event handler to it.
这样，在浏览器构建 DOM、HTML 元素存在（非 null :-) ）并且您的 JavaScript 可以找到它并为其附加事件处理程序之前，您的 JavaScript 不会运行。
回答by L84
I have several scripts running on this page and evidently one script was conflicting with another. To solve my issue I added jQuery.noConflict();
我在这个页面上运行了几个脚本，显然一个脚本与另一个脚本冲突。为了解决我的问题，我添加了jQuery.noConflict();
var $j = jQuery.noConflict();
$j(function() {
$j("#close-gallery-nav-button").click(function() {
$j('#gallery-nav-button').addClass('animated fadeOutRightBig');
});
});
回答by Daniel Dropik
I agree with the advice given above, relating to the onload event. https://stackoverflow.com/a/18470043/2115934
我同意上面给出的有关 onload 事件的建议。https://stackoverflow.com/a/18470043/2115934
A more simple solution (though not necessarily a better one) is to put your script tag just before the closing body tag of the document.
一个更简单的解决方案（虽然不一定更好）是将您的脚本标签放在文档的结束正文标签之前。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1></h1>
<p></p>
<script src="script.js" type="text/javascript"></script> <!-- PUT IT HERE -->
</body>
</html>
回答by Alex
I know this has been answered and it is an old post but wanted to share my experience. I was having the hardest time getting my code to load and was getting this error constantly. I had my javascript external page loading in the head section. Once I moved it to just before the body ended the function fired up right away.
我知道这已经得到回答，这是一个旧帖子，但想分享我的经验。我在加载代码时遇到了最困难的时间，并且不断收到此错误。我在 head 部分加载了我的 javascript 外部页面。一旦我将它移到身体结束之前，该功能立即启动。
