I don't know if this is a well known 'thing' or something new in whatever version of Firefox it just updated itself too - but in either case I have no idea how to google for this question so I'll have to ask it here.
I have a DIV in my DOM that I am trying to directly access by id, in the most simplest form like this:
alert(btnTest.id);
This works fine in all browsers, but was causing issues in firefox that actually led to the browser being in a strange 'broken' state.
The error I was getting was 'btnTest is not defined'. I did not get this error in Safari, Internet Explorer or Chrome.
I assumed I had mismatched HTML tags, or javascript curly braces or something else missing. Eventually after stripping everything out I tried removing the DOCTYPE. Suddenly in Firefox (v 3.0.10) it started returning the correct ID as expected.
What is going on!!! ?? Surely 'strict' mode should allow me to access named elements, and if not then why do all the other browsers let me.
Note: I can easily work around it with $('#btnTest')[0].id, which is what I'm going to have to do now until i can figure out a better solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="blueCircles">
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
alert("ID retrieved through jQuery: " + $('#btnTest')[0].id);
alert("ID retrieved by accessing global variable: " + btnTest.id);
});
</script>
</head>
<body>
<div id="btnTest">
</div>
</body>
</html>