发表新帖
发表新帖

TypeError is Null?

前端 未结
关注
4 548
我在风中等你
我在风中等你 2021-01-12 01:29

This is an error in Firebug I keep seeing.

TypeError: $(\"#gallery-nav-button\") is null
 [Break On This Error]  
$(\'#gallery-nav-button\').addClass(\'anima
相关标签:
4条回答
  • 深忆病人
    2021-01-12 02:00

    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.

    0 讨论(0)
  • 礼貌的吻别
    2021-01-12 02:12

    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.

    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.

    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."

    With raw JavaScript, use window.onload:

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

    With jQuery, use document ready:

    $(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.

    0 讨论(0)
  • 执笔经年
    2021-01-12 02:15

    I agree with the advice given above, relating to the onload event. 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>
    0 讨论(0)
  • 北海茫月
    2021-01-12 02:17

    I have several scripts running on this page and evidently one script was conflicting with another. To solve my issue I added jQuery.noConflict();

    var $j = jQuery.noConflict();
$j(function() {
  $j("#close-gallery-nav-button").click(function() {
    $j('#gallery-nav-button').addClass('animated fadeOutRightBig');
   });
});
    0 讨论(0)
 看不清?
提交回复
热议问题