Change background color with JavaScript?

gaptrast

gaptrast

Member
Messages
123
Reaction score
0
Points
16
Hello,

How can I change background color with JavaScript?

like this:

Code: 
<div onclick="change(green)">change bakcground color</div>
heres the head code

Code: 
function change(){
    document.getElementById('uptd2').style.backgroundColor=();
}
It will not work,, please help.
 
farscapeone

farscapeone

Community Advocate
Community Support
Messages
1,165
Reaction score
27
Points
48
1. Do you actually have an element with id="uptd2"?
2. Your function does not accept any arguments.

You should have done it like this:

Code: 
<div [COLOR="#ff0000"]id="uptd2"[/COLOR] onclick="change([COLOR="#ff0000"]'[/COLOR]green[COLOR="#ff0000"]'[/COLOR])">change background color</div>

....

function change([COLOR="#ff0000"]color[/COLOR]){
    document.getElementById('uptd2').style.backgroundColor = [COLOR="#ff0000"]color[/COLOR];
}

* changes are in red
 
Last edited:
gaptrast

gaptrast

Member
Messages
123
Reaction score
0
Points
16
Well... it did only work if I had the id on the div tag....



Here is the code who di not work for me:



Code: 
<div onclick="change('yellow')">change background color</div>  

<table>
<tr>
<td id="uptd2">

....  

function change(color){
     document.getElementById('uptd2').style.backgroundColor = color; }

It is the table data (td) who shall change background color, not the div...
 
Last edited:
callumacrae

callumacrae

not alex mac
Community Support
Messages
5,257
Reaction score
97
Points
48
If you're doing stuff like this, I would recommend looking into jQuery :)

~Callum
 
essellar

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
A 50KB download to change a background colour on a table cell? That's a bit severe, isn't it?

Is the id "uptd2" unique on the web page? Are you using any sort of debugging aid, like Firebug or even a JavaScript error console, when developing? (And if not, why not?)
 
H

hoj469066

New Member
Messages
3
Reaction score
0
Points
0
Hi,

This example will change the td background color when you click on the div.

<!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" xml:lang="da" lang="da" >
<head>
<style type="text/css">
#changeColorDiv
{
width: 200px;
height: 200px;
color: white;
background-color: grey;
}

#uptd2
{
width: 200px;
height: 200px;
color: white;
background-color: grey;
}
</style>

<script type="text/javascript">
function change(color)
{
document.getElementById('uptd2').style.backgroundColor=(color);
}
</script>
</head>
<body>
<table>
<tr>
<td id="uptd2"></td>
</tr>
</table>

<div id="changeColorDiv" onclick="change('green');">click to change bakcground color</div>
</body>
</html>
 
callumacrae

callumacrae

not alex mac
Community Support
Messages
5,257
Reaction score
97
Points
48
essellar said:
A 50KB download to change a background colour on a table cell? That's a bit severe, isn't it?

Is the id "uptd2" unique on the web page? Are you using any sort of debugging aid, like Firebug or even a JavaScript error console, when developing? (And if not, why not?)
Click to expand...

If you link to the jQuery document hosted on google, it's usually already cached by the user, as there are a LOT of sites that link to it.

~Callum
 
farscapeone

farscapeone

Community Advocate
Community Support
Messages
1,165
Reaction score
27
Points
48
I agree with Alex Mac, jQuery rocks!!! ... and it's totally worth it. Please stop with that 50KB nonsense. Nobody uses JavaScript just to change the background color of one element. At the end the amount of JavasScript code almost always exceeds the size of jQuery library and code combined.
 
leafypiggy

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
even if it WAS 50kb, do you really have that much of a crappy down speed that it would take you long to download it? It would literally take me ~2 seconds here..
 
J

jerome990

New Member
Messages
13
Reaction score
0
Points
0
The changes process is ;

Code:<div onclick="change(green)">change bakcground color</div>
heres the head code

Code:
function change(){document.getElementById('uptd2').style.backgroundColor=();
}It will not work,, please help.
_______________________________________
Malaysia Vacations
Malaysia Holiday
 
callumacrae

callumacrae

not alex mac
Community Support
Messages
5,257
Reaction score
97
Points
48
My phone claims the average page on these forums is about 500kb.

~Callum
 
You must log in or register to reply here.
Top