Firefox Error: document.getElementById.bgtd is undefined

[fototex]

Hi webmasters,

I have an .asp page on which you can change the background picture of a cell by simply selecting the desired color from a dropdown field.

When running the page in Firefox its Error console tells me the following:

Error: document.getElementById.bgtd is undefined
Source File: http://localhost/process.asp
Line: 29

Here is the code:

<select name=ADDITIONALINFO1 ID="Select1" onchange="changebg(document.forms[0].ADDITIONALINFO1[document.forms[0].ADDITIONALINFO1.selectedIndex].value)">
<option value="White"> White
<option value="Black"> Black
<option value="Blue"> Blue
</select>

And here is the changebg script:

function changebg(color){
if (color=="Black")
document.getElementById("bgtd").background = "img/bg-tshirt5.jpg";
else if (color=="Blue")
document.getElementById("bgtd").background = "img/bg-tshirt_bl.jpg";
else
document.getElementById("bgtd").background = "img/bg-tshirt2.jpg";

document.forms[0].bgimg.value = document.getElementById("bgtd").background;
}


Here is the table where the image is displayed as bachground:

<td width="353" background="Webimages/BGS/bg-tshirt2.jpg" height="269" id="bgtd">
<p align="center"><font size="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>
&nbsp;&nbsp;&nbsp;
<img src="<%=imgSrc%>"></font></td>



Internet Explorer does not complain and does the job without any errors.
I Could not find out how to make it work also with Firefox.

Any comments are appreciated.

[edited by: Fotiman at 8:14 pm (utc) on Apr 21, 2010]
[edit reason] Unlinked localhost [/edit]

[whoisgregg]

Which line of that changebg function is line 29?

[fototex]

it is the:

document.getElementById("bgtd").background = "img/bg-tshirt_bl.jpg";

[whoisgregg]

Well, for the life of me I can't see anything *wrong* with the script as is. However, go ahead and try dropping in this replacement function (just slightly different syntax) and see if it gives the same error.

function changebg(color){ 
var img_src = "img/bg-tshirt2.jpg";
if (color=="Black"){
img_src = "img/bg-tshirt5.jpg"; 
} else if (color=="Blue"){ 
img_src = "img/bg-tshirt_bl.jpg"; 
}
document.getElementById("bgtd").style.backgroundImage = "url("+img_src+")"; 
document.forms[0].bgimg.value = img_src; 
} 

[Fotiman]

Is it possible that 'bgtd' is not a unique ID, or that this is being called before 'bgtd' has been added to the document? Maybe you could use Firebug to add a breakpoint in this function, then store the result of document.getElementById("bgtd") in a variable so you can examine it. Just an idea.

[rocknbil]

Re: duplicate ID's, I errantly did this in building a document just this week, and FireFox applied the actions to **both** id'ed elements, so it may not be that . . .

Considering all of the above (no reason it shouldn't work) be sure to validate the document [validator.w3.org]. Invalid (x)html, such as a missing closing tag somewhere, can easily break Javascript.

[fototex]

Hi whoisgregg,

Your code worked great.! (Both IE and Firefox)
Thank you very much.