Geeks With Blogs
Garrett Hoofman ..:: visions of afar ::..

So I just finished spending approximately an hour and a half trying to figure out why my very simple javascript code wasn't working...

function changeColor()
{
     mb.style.backgroundColor = "#000000";
}

Basically, I had an image in the html page, when the mouse went over the image it called that function, which would change the background color of the TD named mb to Black.

I opened up IE and it worked. I opened up Firefox...and nothing happened.

Finally after searching and searching, I found the culprit.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Can anybody tell me why that's preventing Firefox from changing the background color of a TD?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript">
        function changeImage()
        {
            mb.style.backgroundColor = "#000000";
        }
    </script>
    <title>
    Untitled Page
</title></head>
<body>
        <a href="#"><img border="0" src="sham.jpg" id="sham" onmouseover="changeImage()" /></a>
    <table style="width:100%;">

        <tr>
            <td width="50" height="50" id="mb" bgcolor="#cccccc">
                &nbsp;</td>
        </tr>
    </table>

</body>
</html>

Posted on Tuesday, March 18, 2008 1:45 PM | Back to top


Comments on this post: Changing the background color of a TD

# re: Changing the background color of a TD
Requesting Gravatar...
Try:

document.getElementById("mb").style.backgroundColor = "#000000";

IE and FF recognize DOM elements differently. Or you could try the jQuery library.
Left by Kyle on Mar 18, 2008 5:27 PM

# re: Changing the background color of a TD
Requesting Gravatar...
That worked like a charm!
Left by Garrett Hoofman on Mar 19, 2008 10:18 AM

# re: Changing the background color of a TD
Requesting Gravatar...
Garrett,
if you haven't figured it out yet, coding javascript is a pain since you have to deal with code for IE, Opera, FireFox, Safari, etc, and all their versions...You were using an old W3 command, what Kyle said was right on. Check out some Javascript libraries like Yahoo UI (YUI), JQuery, Dojo, MooTools, Prototype, and Script.acul.us. MIx those with your own Javascript and it does wonders.
-Ryan (MTU Alumni)
Left by Ryan on Jun 01, 2008 3:33 PM

# re: Changing the background color of a TD
Requesting Gravatar...
Very good article, thank you landlord's share
Left by watch replica on Apr 29, 2010 4:05 AM

Your comment:
 (will show your gravatar)


Copyright © Garrett Hoofman | Powered by: GeeksWithBlogs.net