Why is my GetElementbyID.InnerHtml null?
May 30, 2011 2:17 PM Subscribe
Why is my GetElementbyID.InnerHtml null?
I have some Javascript whose purpose is to swap out an image when the image is clicked.
Here it is with the angle brackets changed to brackets:
[a href="#" onclick="flipcard('2')"][span id="book2"][img src="black.jpg"][/span][img src="spacer.gif"][/a]
function flipcard(book){
document.getElementById('book2').innerHTML = '[img src ="carmel.jpg"]';
... then some more code...
The error I get is
Error: document.getElementById("book2") is null
(I have checked and there is only one reference to
document.getElementById("book2") in the code.)
Usually this error comes because it is null, ie the event is triggered before the element is populated or because nothing is in the element.
BUT
1) I load the page
2) I open up Firebug and browse to the [span id="book2"]
3) I right-click it to inspect the DOM
4) innerHTML has a value of "[img src ="black.jpg"]"
5) I look at the Javacript Error Console and there are no errors
6) Then I click the image to initiate the onclick event
7) And that's when I get the error
So according to Firebug the page is rendered and the Span ID is already populated when I get the error.
The JS is in a function so it's not trying to run before the page loads anyway. Putting the JS in the header or after the HTML makes no difference. Same error in FF 3.6 and IE 7.
Ideas? Alternatives to innerHTML are fine. I tried to use the DOM properly first with childnodes and so on but couldn't get that working, and I have a very similar innerHTML thing working elsewhere so that's what I went with.
I can't figure out how to troubleshoot this--it says it's null but it isn't. Must be something very stupid on my part....
I have some Javascript whose purpose is to swap out an image when the image is clicked.
Here it is with the angle brackets changed to brackets:
[a href="#" onclick="flipcard('2')"][span id="book2"][img src="black.jpg"][/span][img src="spacer.gif"][/a]
function flipcard(book){
document.getElementById('book2').innerHTML = '[img src ="carmel.jpg"]';
... then some more code...
The error I get is
Error: document.getElementById("book2") is null
(I have checked and there is only one reference to
document.getElementById("book2") in the code.)
Usually this error comes because it is null, ie the event is triggered before the element is populated or because nothing is in the element.
BUT
1) I load the page
2) I open up Firebug and browse to the [span id="book2"]
3) I right-click it to inspect the DOM
4) innerHTML has a value of "[img src ="black.jpg"]"
5) I look at the Javacript Error Console and there are no errors
6) Then I click the image to initiate the onclick event
7) And that's when I get the error
So according to Firebug the page is rendered and the Span ID is already populated when I get the error.
The JS is in a function so it's not trying to run before the page loads anyway. Putting the JS in the header or after the HTML makes no difference. Same error in FF 3.6 and IE 7.
Ideas? Alternatives to innerHTML are fine. I tried to use the DOM properly first with childnodes and so on but couldn't get that working, and I have a very similar innerHTML thing working elsewhere so that's what I went with.
I can't figure out how to troubleshoot this--it says it's null but it isn't. Must be something very stupid on my part....
Response by poster: I'm not using JQuery and just looked at it the first time via your link
But I'm going to try that second item you linked to right now.
posted by lockedroomguy at 2:30 PM on May 30, 2011
But I'm going to try that second item you linked to right now.
posted by lockedroomguy at 2:30 PM on May 30, 2011
I'm not an expert, but I suspect the issue is that innerHTML is really used primarily to get or set text, but not getting or setting attributes (for that, it's always better to refer to the attribute itself in the DOM). I expect that someone will be along shortly to explain why that's the case!
posted by Paragon at 2:35 PM on May 30, 2011
posted by Paragon at 2:35 PM on May 30, 2011
Response by poster: Tried the second link from Paragon, where I modify the .src instead of the .InnerHTML, and I get a variation on the same error.
Error: document.getElementById("book2") is null
It really thinks that span is empty for some reason.
posted by lockedroomguy at 2:39 PM on May 30, 2011
Error: document.getElementById("book2") is null
It really thinks that span is empty for some reason.
posted by lockedroomguy at 2:39 PM on May 30, 2011
Response by poster: Sorry, I should have said in this case it thinks the img is empty, not the span
posted by lockedroomguy at 2:40 PM on May 30, 2011
posted by lockedroomguy at 2:40 PM on May 30, 2011
It's getting that error because it can't find the element with ID "book2". Is this in an iframe or something?
posted by zsazsa at 2:46 PM on May 30, 2011
posted by zsazsa at 2:46 PM on May 30, 2011
Huh, interesting. What happens if you move the function to a point in the page after the span / img? Like, adding a button at the bottom of the page to trigger the function.
posted by Paragon at 2:47 PM on May 30, 2011
posted by Paragon at 2:47 PM on May 30, 2011
Yes, I'd try putting the script before the </body> tag
posted by backwards guitar at 2:52 PM on May 30, 2011
posted by backwards guitar at 2:52 PM on May 30, 2011
you know in firebug you can call stuff directly right? In the bottom of the Firebug console, after the page is loaded what happens if you type:
document.getElementById('book2')
?
posted by bitdamaged at 3:09 PM on May 30, 2011
document.getElementById('book2')
?
posted by bitdamaged at 3:09 PM on May 30, 2011
Response by poster: "before the body tag"
--yes tried that, same result
posted by lockedroomguy at 3:38 PM on May 30, 2011
--yes tried that, same result
posted by lockedroomguy at 3:38 PM on May 30, 2011
Response by poster: "you can call stuff directly, right"
--not sure what you mean. I don't have any entry fields at the bottom of my Firebug console.
(I can inspect that element and it is populated with an img tag as expected--is that equivalent?)
posted by lockedroomguy at 3:41 PM on May 30, 2011
--not sure what you mean. I don't have any entry fields at the bottom of my Firebug console.
(I can inspect that element and it is populated with an img tag as expected--is that equivalent?)
posted by lockedroomguy at 3:41 PM on May 30, 2011
Response by poster: "What happens if you move the function to a point in the page after the span / img?"
Tried that Paragon. It does the same thing.
posted by lockedroomguy at 3:46 PM on May 30, 2011
Tried that Paragon. It does the same thing.
posted by lockedroomguy at 3:46 PM on May 30, 2011
Stupid question: There's no other element with id="book2" or name="book2" in the document, right?
Also, make sure that you've declared your doctype properly.
IE's getElementByID behaves a bit oddly and treats names/IDs interchangeably, which can cause erratic behavior. Firefox may emulate this behavior if you haven't declared a doctype.
posted by schmod at 4:25 PM on May 30, 2011
Also, make sure that you've declared your doctype properly.
IE's getElementByID behaves a bit oddly and treats names/IDs interchangeably, which can cause erratic behavior. Firefox may emulate this behavior if you haven't declared a doctype.
posted by schmod at 4:25 PM on May 30, 2011
Response by poster: Hmmm... Well here is the doctype:
[!doctype html][html][head][meta http-equiv="content-type" content="text/html; charset=UTF-8"][title]Transport[/title][link rel="stylesheet" TYPE="text/css" href="mainmenu.css"]
And the ID in question is unique.
posted by lockedroomguy at 4:44 PM on May 30, 2011
[!doctype html][html][head][meta http-equiv="content-type" content="text/html; charset=UTF-8"][title]Transport[/title][link rel="stylesheet" TYPE="text/css" href="mainmenu.css"]
And the ID in question is unique.
posted by lockedroomguy at 4:44 PM on May 30, 2011
Hmm... this is a head-scratcher. What happens if you declare the doctype as follows:
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"][html][head]...
posted by Paragon at 4:54 PM on May 30, 2011
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"][html][head]...
posted by Paragon at 4:54 PM on May 30, 2011
Best answer: when I cut and pasted (and then munged so it had the correct kind of bracket type) this code into an empty web page, it worked. Which means that whatever is breaking your code isn't in what you listed above.
When all else fails, try binary search. Remove everything but the bare minimum of what you need to test this function from your page (back it up somewhere, of course), and then see if it works. If it doesn't, remove more stuff. When you have something that works, add your page back in piece by piece until it breaks, at which point you'll know what the problem is.
What bitdamaged meant by "you know you can call stuff directly" is that firebug allows interactive access to javascript. if you open the Firebug console, you can type javascript code into the prompt and it will execute it. This can also be a very useful debugging tool.
posted by contrarian at 5:25 PM on May 30, 2011
When all else fails, try binary search. Remove everything but the bare minimum of what you need to test this function from your page (back it up somewhere, of course), and then see if it works. If it doesn't, remove more stuff. When you have something that works, add your page back in piece by piece until it breaks, at which point you'll know what the problem is.
What bitdamaged meant by "you know you can call stuff directly" is that firebug allows interactive access to javascript. if you open the Firebug console, you can type javascript code into the prompt and it will execute it. This can also be a very useful debugging tool.
posted by contrarian at 5:25 PM on May 30, 2011
when I cut and pasted (and then munged so it had the correct kind of bracket type) this code into an empty web page, it worked.
ditto this. Firefox 4.0.1 on Vista at least.
posted by juv3nal at 5:28 PM on May 30, 2011
ditto this. Firefox 4.0.1 on Vista at least.
posted by juv3nal at 5:28 PM on May 30, 2011
Best answer: I think you're going to have to show us the whole code at this point. Clearly something outside the code samples you're showing us is causing it.
posted by AmbroseChapel at 5:39 PM on May 30, 2011
posted by AmbroseChapel at 5:39 PM on May 30, 2011
Response by poster: Contrarian's suggestion worked, so best answer there.
AmbroseChapel's suggestion terrified me into trying Contrarian's suggestion, so best answer there.
It's working but I haven't figured out which thing I took out fixed it. Will post if I do.
Thanks all!
posted by lockedroomguy at 6:44 PM on May 30, 2011
AmbroseChapel's suggestion terrified me into trying Contrarian's suggestion, so best answer there.
It's working but I haven't figured out which thing I took out fixed it. Will post if I do.
Thanks all!
posted by lockedroomguy at 6:44 PM on May 30, 2011
This thread is closed to new comments.
posted by Paragon at 2:26 PM on May 30, 2011