IE error on simple jQuery

Detaild information about the error

Useraget: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .N开发者_运维问答ET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Tiemstamp: Tue, 25 May 2010 08:54:11 UTC

Message: Object doesn't support this property or method Row: 208 Character: 3 Code: 0

At row 208 i have perpage = $("#perpage").val();

What is wrong here? It only happens in IE8, Firefox runs it flawlessly. Anyone have any idea?

The problem seems to be that i had same name for JavaScript variable and element id. When i renamed the variable to vperpage it all worked in IE aswell.

vperpage = $("#perpage").val(); //Seem to work in Internet Explorer

Anyone that can confirm this strange behavior in IE?

Edited 2010-05-25 13:57 GMT+1

Just like @bobince says and the link he posted, IE sees the element and variable as the same thing if we do not declare the variable in our JavaScript.

var perpage = $("#perpage").val(); /*Works in Internet Explorer */
perpage = $("#perpage").val(); /*Doesn't work in Internet Explorer since 
                               we already have a element with the id perpage*/

This can be confusing since JavaScript itself also automatically declares a variable that doesn't exist if we give it a value. But this, as we noticed in the problem above, do not work when we already have an element with the same id. So, bad practice not to always declare your own variables :) Lesson learned!

Is the element with id perpage anything other than form input fields? If yes, you should use:

var perpage = $("#perpage").html(); // for html contents of the element
var perpage = $("#perpage").text(); // for textual contents of the element

This could also be problematic if you have assigned the id #perpage to more than one element.