How to fix ''null' is null or not an object' in IE when using jQuery and extjs

I am getting an "'null' is null or not an object" in IE when using jQuery. It works fine in Chrome and Firefox. Please help.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727) Timestamp: Mon, 6 Dec 2010 12:45:25开发者_JAVA技巧 UTC

Message: 'null' is null or not an object Line: 12 Char: 4 Code: 0 URI: http://localhost:9999/Track/js/js/custom.js

The code in jquery is

$("#login").click(function() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

The error points at $("#login").

If you're using jQuery, you should really use it.

$("#login").click(function() {
    var username = $("#username").val();
    var password = $("#password").val();
});

Try

javascript:(function(){alert($)})()

in the address bar. If that returns an error something is breaking JQuery in IE. Maybe broken HTML or a conditional comment that isn't closed properly. The quickest way to find HTML errors is to validate your HTML.

Also you might want to learn JQuery before using it. It's selectors are very powerful and can do serious damage to page performance (especially in IE) if you don't think in terms of how many tags are being parsed to get at your target set. Narrow down to the closest ID whenever possible. If user and password are inside #login you could have used var username = $(this).find('#username').val().

Note: Just going straight to the ID as in the other example would be most direct. I'm just showing how you can target 'this' inside a JQuery event handler to get at elements inside if they don't have an ID.