Javascript TypeError为空？_Javascript_Jquery

Javascript TypeError为空？

javascript jquery

Javascript TypeError为空？,javascript,jquery,Javascript,Jquery,这是我一直看到的Firebug中的一个错误 TypeError: $("#gallery-nav-button") is null [Break On This Error] $('#gallery-nav-button').addClass('animated fadeOutRightBig'); 这是我的密码： JS HTML 我在这个页面上运行了几个脚本，显然一个脚本与另一个脚本冲突。为了解决我的问题，我补充道我还想补充一点——因为这是对重要错误消息“TypeError:[x]为

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

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

这是我的密码：

HTML

我在这个页面上运行了几个脚本，显然一个脚本与另一个脚本冲突。为了解决我的问题，我补充道

我还想补充一点——因为这是对重要错误消息“TypeError:[x]为null”的#1谷歌搜索结果——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：

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

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

我同意上面给出的关于onload事件的建议

一个更简单的解决方案（虽然不一定更好）是将脚本标记放在文档的结束体标记之前

<!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>


文件

我知道这个问题已经得到了回答，这是一篇老文章，但我想分享我的经验。我在加载我的代码时遇到了最困难的时刻，并且经常出现这个错误。我在head部分加载了javascript外部页面。一旦我将其移动到主体结束之前，函数立即启动。

听起来像是jQuery的问题。你用的是什么版本？你确定jQuery已加载吗？@alexandernst-我正在使用1.8.2，是的，它已加载。你也可以将jQuery代码放在

（函数（$）{/…}）（jQuery）

中，反之亦然：

jQuery（函数（$）{…}）

这应该是注释，而不是答案。

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

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

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

<!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>