Geek Answers Handbook

TypeError - Null?

This is a bug in Firebug that I see.

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

Here is my code:

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;}
+7
source share
3 answers

I have several scripts running on this page, and apparently one script contradicted the other. To solve the problem, I added jQuery.noConflict ();

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

I also want to add - because it’s the result of Google search # 1 for the important error message “TypeError: [x] is null” - the most common reason the JavaScript developer will get this is because they are trying to assign an event handler for DOM element, but the DOM element has not yet been created.

The code is mostly executed from top to bottom. Most developers place their JavaScript in the header of their HTML file. The browser received HTML, CSS and JavaScript from the server; Performs "execution" / rendering of a web page; and it executes JavaScript, but it has not yet deleted the HTML file to “execute” / render the HTML.

To deal with this, you need to introduce a delay before JavaScript is executed, for example, put it in a function that is not called until the browser has "executed" all the HTML code and triggered the "DOM ready" event.

With raw JavaScript, use window.onload:

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

Use jQuery to use the finished document:

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

This way, your JavaScript will not run until the browser builds the DOM, the HTML element exists (not null :-)), and your JavaScript can find it and attach an event handler to it.

+25
source

I agree with the advice above regarding the onload event. stack overflow

A simpler solution (although not necessarily the best) is to place the script tag immediately before the tag of the closing 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
source

More articles:


All Articles