...

View Full Version : Simple background colour changing function not working



Phalanxer
06-30-2012, 07:58 AM
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
06-30-2012, 08:26 AM
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
06-30-2012, 09:06 AM
Hey Phil,

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

Phalanxer
06-30-2012, 09:32 AM
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
06-30-2012, 10:04 AM
No surprise. You are assigning the same name to an id and a function.

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

Phalanxer
06-30-2012, 10:11 AM
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
06-30-2012, 10:22 AM
I needed to put '.style' infront of .backgroundColor.

Solved.

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

Philip M
06-30-2012, 10:31 AM
I needed to put '.style' infront of .backgroundColor.

Solved.

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

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
06-30-2012, 10:32 AM
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
06-30-2012, 10:35 AM
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
06-30-2012, 10:36 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum