Simple background colour changing function not working

[Phalanxer]

function tablea() {
	document.getElementById("tablea").background-color = "lightgray";
}

<A href="tables/a/" id="tablea" onclick="tablea()" style="background-color: gray">foobar</A>

Firefox's error console reports:

Error: invalid assignment left-hand side
Source Code:
document.getElementById("tablea").background-color = "lightgray";

... pointing at the equals character.

I have no idea what that means, does anyone know what the issue is here?

[Philip M]

CSS properties with hyphens in them are represented by JavaScript properties in camelCase.

(CSS) background-color
should be (Javascript) backgroundColor - note the capital C


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[Phalanxer]

Hey Phil,

Thanks, the error messages are gone, but the background colour isn't changing.

[Phalanxer]

Try it yourself and you'll see what I mean:

<STYLE type="text/css">
	A {color: black;}
</STYLE>
<SCRIPT type="text/javascript">
	function tablea() {document.getElementById("tablea").backgroundColor = "green";}
	function tableb() {document.getElementById("tableb").backgroundColor = "green";}
</SCRIPT>
<A href="a/" id="tablea" onclick="tablea()" style="background-color: red" target="table">111</A>
<A href="b/" id="tableb" onclick="tableb()" style="background-color: red" target="table">222</A>
<IFRAME name="table"></IFRAME>

[Philip M]

No surprise. You are assigning the same name to an id and a function.

id="tablea" onclick="tablea()"

[Phalanxer]

I now have a function called 'tableafunction()' and an id called 'tablea'.

<STYLE type="text/css">
	A {color: black;}
</STYLE>
<SCRIPT type="text/javascript">
	function tableafunction() {document.getElementById("tablea").backgroundColor = "green";}
	function tablebfunction() {document.getElementById("tableb").backgroundColor = "green";}
</SCRIPT>
<A href="a/" id="tablea" onclick="tableafunction()" style="background-color: red" target="table">111</A>
<A href="b/" id="tableb" onclick="tablebfunction()" style="background-color: red" target="table">222</A>
<IFRAME name="table"></IFRAME>

Still doesn't work.

[Phalanxer]

I needed to put '.style' infront of .backgroundColor.

Solved.

EDIT: Having the same names wasn't a problem either... Suprise!

[Philip M]

Originally Posted by Phalanxer

I needed to put '.style' infront of .backgroundColor.

Solved.

EDIT: Having the same names wasn't a problem either... Suprise!

It is very poor practice and will cause a crash in IE. Example:-

<input id = "text">

<script type = "text/javascript">
text = "Hello World";  // global variable
document.getElementById('text').value = text;
</script>

IE automatically reserves a var ID = domElement; in the global space for each DOM-Element with an ID. Some other browsers adopted this behaviour. So the same name for a javascript function /variable and an id will collide.

[Phalanxer]

I disagree with it being bad practice. I think its good practice, because it creates consistency which in turn makes it easier to work with.

LOL IE! I never ever think of IE when developing a website, only web standards. IE isn't even a web browser to me.
Thanks for your opinion though.

I am building an application that will be used by me only.

[Philip M]

Originally Posted by Phalanxer

I am building an application that will be used by me only.

Well, that means you can break as many guidelines as you want. What you do in the privacy of your own home ....

[Phalanxer]

Best practices aside, I will never rest until a page I am making is standard compliant in all languages that I am using - even if its just for me.