Changing Background Color in Javascript

Question

I'm trying to change the background color of a table when the mouse hovers it. How do I fix it?

I get this error: "Unexpected token ERROR" in Google Chrome

    echo '<table id="a1" onmouseover="document.getElementById(\'a1\').backgroundColor = #CCCCCC;">
    <td align="center"></td></table>';

What am I doing wrong?

this could just be done in css... using #a1:hover{background-color:#CCC;} — samccone
– samccone, Commented Aug 14, 2011 at 3:34
You may want to consider doing this via CSS or jQuery. Echoing out a whole bunch of js events won't be very efficient or easy to maintain. If you have questions about those choices just ask! — mrtsherman
– mrtsherman, Commented Aug 14, 2011 at 3:34
@mrtsherman, jQuery is also Javascript and even if he has to do this with JS, jQuery is overkill. — user529649
– user529649, Commented Aug 14, 2011 at 3:44
@omeid - I am aware that jQuery is javascript =). He can write this in a single line of jQuery. Or he could write a lot of javascript or a lot of redundant javascript. Why not use tools that make your development fast and easy? Of course the whole thing is moot since the real answer is CSS. — mrtsherman
– mrtsherman, Commented Aug 14, 2011 at 7:31
@mrtsherman: your fast development shouldn't cost resources. — user529649
– user529649, Commented Aug 14, 2011 at 11:40

Joe · Accepted Answer · 2011-08-14 03:31:07Z

2

#CCCCCC should be a string, \'#CCCCCC\'

answered Aug 14, 2011 at 3:31

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shawn · Accepted Answer · 2011-08-14 03:31:44Z

1

function changeBackground(color) {
   document.getElementById('a1').backgroundColor = color;
}

<table id="a1" onmouseover="changeBackground('red');">

answered Aug 14, 2011 at 3:31

Shawn

7,3636 gold badges37 silver badges47 bronze badges

Comments

codeandcloud · Accepted Answer · 2011-08-14 03:49:21Z

1

Try this.

echo '<table id="a1" onmouseover="this.style.backgroundColor=\'#ccc\'" onmouseout="this.style.backgroundColor=\'#000\'">
<td align="center"></td></table>';

Because,

backgroundColor is a property of style property of the HTMLElement.
#CCCCCC should be in quotes

An ideally you should use the powerful this keyword in scenarios like this.

edited Aug 14, 2011 at 3:49

answered Aug 14, 2011 at 3:35

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

1 Comment

alex Over a year ago

Thanks! Now how do I change the background color to nothing? Like - no background color at all? I tried putting nothing in the color string - but it didn't work.

boatcoder · Accepted Answer · 2011-08-14 03:50:09Z

0

Use CSS to pull this off, it will run faster and look nicer (you won't get any screwy edge cases).

#a1 {
    background-color: #FFF;
}

#a1:hover {
    background-color: #CCC;
}

answered Aug 14, 2011 at 3:50

boatcoder

18.2k21 gold badges126 silver badges188 bronze badges

Collectives™ on Stack Overflow

Changing Background Color in Javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related