Changing bgcolor fails

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
arukomp
Forum Contributor
Posts: 113
Joined: Sun Sep 24, 2006 4:22 am

Changing bgcolor fails

Post by arukomp »

Hi,

I want to change html element's attributes with javascript. It's possible, right? I saw tutorials on w3schools.com about that and it works.

I find a problem myself and I can't find what's wrong with my code.

I generate a table within php. I give each <td> element an ID with a numeric value (1 to 31) and a onclick event which should start javascript function to change that <td> element's bgcolor value:

Code: Select all

function changeColor(id)
{
	var x=document.getElementById(id)
	x.bgcolor="#000000"
	alert("Done. Color: " + x.bgcolor)
}
Now at first, all bgcolor values are set to #FFFFFF. When I click on a table cell, that javascript function is called and alert box comes out with this - "Done. Color: #000000". Everything seems ok, but the color of that table cell didn't change, it's still the same white color. What's the problem? Is it the wrong way to change element's attributes? If so, how to do it?

Thanks very much.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

try x.style.background = '#colour'
arukomp
Forum Contributor
Posts: 113
Joined: Sun Sep 24, 2006 4:22 am

Post by arukomp »

nickvd wrote:try x.style.background = '#colour'
Thanks, it works! :D
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Glad I could help!
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

The "correct" solution is that there is no bgcolor attribute in JavaScript. It's backgroundColor.
arukomp
Forum Contributor
Posts: 113
Joined: Sun Sep 24, 2006 4:22 am

Post by arukomp »

superdezign wrote:The "correct" solution is that there is no bgcolor attribute in JavaScript. It's backgroundColor.
but there is bgcolor attribute in <td> tag, so I tried to change that within JS, like changing href attribute in <a> tag, which was showed in W3Schools and worked. I thought I could change every html element's attribute, but it seems not
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

"href" is a registered property of an anchor object in Javascript. "bgcolor" is not.
arukomp
Forum Contributor
Posts: 113
Joined: Sun Sep 24, 2006 4:22 am

Post by arukomp »

feyd wrote:"href" is a registered property of an anchor object in Javascript. "bgcolor" is not.
hm... That makes sense. Is 'style' attribute registered in Javascript? How do I know if attribute is registered or not? I'll be working with javascript quite a lot, so I need to know. Thanks
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

arukomp wrote:
feyd wrote:"href" is a registered property of an anchor object in Javascript. "bgcolor" is not.
hm... That makes sense. Is 'style' attribute registered in Javascript? How do I know if attribute is registered or not? I'll be working with javascript quite a lot, so I need to know. Thanks
"Style" isn't a simple attribute. The style member of a DOM Element object is actually an Object that you add attributes to (i.e. backgroundColor).

Good references for the DOM and such are the MDC, Quirksmode, somewhere in the MSDN (if you are curious about the differences in IE's DOM and the standard DOM), and it's always good to have Firebug handy if you have Firefox.

Also, just an FYI, there are also setAttribute() methods. As the DOM matures, they are trying to standardize more and more of the functionality and move programmers away from simple value assignments and add more flexibility.
arukomp
Forum Contributor
Posts: 113
Joined: Sun Sep 24, 2006 4:22 am

Post by arukomp »

Thanks, superdezign, very useful post :D
Post Reply