10

这是我一直看到的 Firebug 中的一个错误。

TypeError: $("#gallery-nav-button") is null
 [Break On This Error]  
$('#gallery-nav-button').addClass('animated fadeOutRightBig');

这是我的代码：

JS

$(function() {
  $("#close-gallery-nav-button").click(function() {
    $('#gallery-nav-button').addClass('animated fadeOutRightBig');
   });
});

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

#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;}
4

4 回答 4

42

我还想补充一点——因为这是重要错误消息“TypeError: [x] is null”的#1 Google 搜索结果——JavaScript 开发人员得到这个的最常见原因是他们试图分配一个事件处理 DOM 元素，但尚未创建 DOM 元素。

代码基本上是从上到下运行的。大多数开发人员将他们的 JavaScript 放在 HTML 文件的头部。浏览器已从服务器接收到 HTML、CSS 和 JavaScript；正在“执行”/呈现网页；并且正在执行 JavaScript，但它还没有进一步深入 HTML 文件以“执行”/呈现 HTML。

为了处理这个问题，你需要在你的 JavaScript 被执行之前引入一个延迟，比如把它放在一个函数中，直到浏览器“执行”了所有的 HTML 并触发了“DOM 就绪”事件。

对于原始 JavaScript，使用 window.onload：

window.onload=function() {
   /*your code here*
   /*var date = document.getElementById("date");
   /*alert(date);
}

使用 jQuery，使用准备好的文档：

$(document).ready(function() {
   /*your code here*
   /*var date = document.getElementById("date");
   /*alert(date);
});

这样，在浏览器构建 DOM、HTML 元素存在（不是 null :-)）并且您的 JavaScript 可以找到它并将事件处理程序附加到它之前，您的 JavaScript 不会运行。

于 2013-08-27T15:43:11.227 回答
13

我在此页面上运行了几个脚本，显然一个脚本与另一个脚本冲突。为了解决我的问题，我添加了jQuery.noConflict();

var $j = jQuery.noConflict();
$j(function() {
  $j("#close-gallery-nav-button").click(function() {
    $j('#gallery-nav-button').addClass('animated fadeOutRightBig');
   });
});
于 2012-09-26T23:51:43.973 回答
0

我同意上面给出的关于 onload 事件的建议。https://stackoverflow.com/a/18470043/2115934

一个更简单的解决方案（尽管不一定是更好的解决方案）是将您的脚本标签放在文档的结束正文标签之前。

<!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>
于 2013-11-27T18:04:49.193 回答
-1

我知道这已经得到回答，这是一个旧帖子，但想分享我的经验。我最难加载我的代码，并且不断收到此错误。我在头部加载了我的 javascript 外部页面。一旦我将它移到身体结束之前，该功能立即启动。

于 2020-04-08T19:49:49.940 回答