...

View Full Version : Change background color of html table using js



lovetolearn
09-11-2011, 12:13 AM
Hello,

I am trying to change the background color of a table based on the value of a picklist. For instance. if the picklist value was "1", then the background color of the table should be red. Not sure where I went wrong in my code.



<html>
<body>
<script type="text/javascript">

if (level="1")
{
levelColor = #FF0000;
}
</script>
<select name="level">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
</select>
<br><br>
<center>
<table name="levelColor" width="700px" height="100px" cellspacing="0" cellpadding="0" border="1">
<tr>
<td><center>This is the level.</center></td>
</tr>
</table>
</center>
</body>
</html>


Please help. Thank you.

xelawho
09-11-2011, 12:32 AM
just a couple of minor issues...



<html>
<head>
<script type="text/javascript">
function changeColor(bg) {
document.getElementById("levelColor").style.backgroundColor = bg;
}
</script>
</head>
<body>

<select name="level" onChange="changeColor(value)">
<option value="#FF0000">1</option>
<option value="#00FF00">2</option>
<option value="#0000FF">3</option>
<option value="#DD0000">4</option>
<option value="#AA0000">5</option>
</select>
<br><br>
<center>
<table id="levelColor" width="700px" height="100px" cellspacing="0" cellpadding="0" border="1">
<tr>
<td><center>This is the level.</center></td>
</tr>
</table>
</center>
</body>
</html>

lovetolearn
09-11-2011, 12:39 AM
Thank you.

lovetolearn
09-11-2011, 01:10 AM
Would it be possible to add text to it too. For instance, for the value "1" the bg color is red and the text will read "This is the first level."

xelawho
09-11-2011, 01:26 AM
it would...


<html>
<head>

</head>
<body>

<select name="level" onChange="changeColor(value)">
<option value="#FF0000$first">1</option>
<option value="#00FF00$second">2</option>
<option value="#0000FF$third">3</option>
<option value="#DD0000$fourth">4</option>
<option value="#AA0000$fifth">5</option>
</select>
<br><br>
<center>
<table width="700px" height="100px" cellspacing="0" cellpadding="0" border="1">
<tr>
<td id="levelColor"><center>This is the level.</center></td>
</tr>
</table>
</center>

<script type="text/javascript">
document.getElementById("levelColor").style.textAlign="center";
function changeColor(bg) {
bgcolor=bg.split("$")[0];
text=bg.split("$")[1];
document.getElementById("levelColor").style.backgroundColor = bgcolor;
document.getElementById("levelColor").innerHTML = "this is the " + text+ " level";
}
</script>
</body>
</html>

lovetolearn
09-11-2011, 06:27 AM
I took the code a little further. I wanted the value of the first picklist "level" to change for different combinations of values for picklist "hasName" and picklist "olderThan." Not sure why I cant get it to work though.



<html>
<head>
<title>Test Page</title>
</head>
<body>

<select name="level" onChange="changeColor(value)">
<option value="#FF0000$first">1</option>
<option value="#00FF00$second">2</option>
<option value="#0000FF$third">3</option>
<option value="#DD0000$fourth">4</option>
<option value="#AA0000$fifth">5</option>
</select>
<select name="hasName" onChange="changeLevel">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<select name="olderThan" onChange="changeLevel">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<br><br>
<center>
<table width="700px" height="100px" cellspacing="0" cellpadding="0" border="1">
<tr>
<td id="levelColor"><center>This is the level.</center></td>
</tr>
</table>
</center>

<script type="text/javascript">
document.getElementById("levelColor").style.textAlign="center";
function changeColor(bg) {
bgcolor=bg.split("$")[0];
text=bg.split("$")[1];
document.getElementById("levelColor").style.backgroundColor = bgcolor;
document.getElementById("levelColor").innerHTML = "this is the " + text+ " level";
}
function changeLevel(){
var name = document.getElementById("hasName");
var age = document.getElementById("olderThan");
var currentLevel = document.getElementById ("level");
if (name.value = "No" && age.value="10")
currentLevel.value = "2"
}
</script>
</body>
</html>



thanks for all your help.

xelawho
09-11-2011, 09:15 AM
problems...
your onChange function calls weren't calling functions - you have to put the () after the function name

in your if statement you need to use double == Using = is for assigning a value to a variable. Double is for comparing.

once the (name.value == "No" && age.value=="10") is true, assigning the value 2 to the select box doesn't do anything - to change the text in the select box you need to change the selected Index, but that doesn't fire the onChange function, so you need to call changeColor() yourself.


<html>
<head>
<title>Test Page</title>
</head>
<body>
<form name="myform">
<select id="level" onChange="changeColor(value)">
<option value="#FF0000$first">1</option>
<option value="#00FF00$second">2</option>
<option value="#0000FF$third">3</option>
<option value="#DD0000$fourth">4</option>
<option value="#AA0000$fifth">5</option>
</select>
<select id="hasName" onChange="changeLevel()">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<select id="olderThan" onChange="changeLevel()">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select></form>
<br><br>
<center>
<table width="700px" height="100px" cellspacing="0" cellpadding="0" border="1">
<tr>
<td id="levelColor"><center>This is the level.</center></td>
</tr>
</table>
</center>

<script type="text/javascript">
document.getElementById("levelColor").style.textAlign="center";
function changeColor(bg) {
bgcolor=bg.split("$")[0];
text=bg.split("$")[1];
document.getElementById("levelColor").style.backgroundColor = bgcolor;
document.getElementById("levelColor").innerHTML = "this is the " + text+ " level";
}
function changeLevel(){
var name = document.getElementById("hasName");
var age = document.getElementById("olderThan");
if (name.value == "No" && age.value=="10") {
document.getElementById("level").selectedIndex=1;
changeColor("#00FF00$second");
}
}
</script>
</body>
</html>

xelawho
09-11-2011, 09:33 AM
... but the way you are doing it, with a changeColor and changeLevel function doing similar things might start to get complicated - notice how if hasName is No and olderThan is 10, you can still change the table contents by changing level?

maybe you want that, or maybe it would be better to fold the two functions into one...


<html>
<head>
<title>Test Page</title>
</head>
<body>
<form name="myform">
<select id="level" onChange="changeColor()">
<option value="#FF0000$first">1</option>
<option value="#00FF00$second">2</option>
<option value="#0000FF$third">3</option>
<option value="#DD0000$fourth">4</option>
<option value="#AA0000$fifth">5</option>
</select>
<select id="hasName" onChange="changeColor()">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<select id="olderThan" onChange="changeColor()">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select></form>
<br><br>
<center>
<table width="700px" height="100px" cellspacing="0" cellpadding="0" border="1">
<tr>
<td id="levelColor"><center>This is the level.</center></td>
</tr>
</table>
</center>

<script type="text/javascript">
document.getElementById("levelColor").style.textAlign="center";
function changeColor() {
var name = document.getElementById("hasName").value;
var age = document.getElementById("olderThan").value;
var bg = document.getElementById("level").value;
if (name == "No" && age=="10") {
document.getElementById("level").selectedIndex=1;
document.getElementById("levelColor").style.backgroundColor = "#00FF00";
document.getElementById("levelColor").innerHTML = "this is the second level";
} else {
bgcolor=bg.split("$")[0];
text=bg.split("$")[1];
document.getElementById("levelColor").style.backgroundColor = bgcolor;
document.getElementById("levelColor").innerHTML = "this is the " + text+ " level";
}
}
</script>
</body>
</html>

lovetolearn
09-11-2011, 08:36 PM
problems...
your onChange function calls weren't calling functions - you have to put the () after the function name

in your if statement you need to use double == Using = is for assigning a value to a variable. Double is for comparing.

once the (name.value == "No" && age.value=="10") is true, assigning the value 2 to the select box doesn't do anything - to change the text in the select box you need to change the selected Index, but that doesn't fire the onChange function, so you need to call changeColor() yourself.


<html>
<head>
<title>Test Page</title>
</head>
<body>
<form name="myform">
<select id="level" onChange="changeColor(value)">
<option value="#FF0000$first">1</option>
<option value="#00FF00$second">2</option>
<option value="#0000FF$third">3</option>
<option value="#DD0000$fourth">4</option>
<option value="#AA0000$fifth">5</option>
</select>
<select id="hasName" onChange="changeLevel()">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<select id="olderThan" onChange="changeLevel()">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select></form>
<br><br>
<center>
<table width="700px" height="100px" cellspacing="0" cellpadding="0" border="1">
<tr>
<td id="levelColor"><center>This is the level.</center></td>
</tr>
</table>
</center>

<script type="text/javascript">
document.getElementById("levelColor").style.textAlign="center";
function changeColor(bg) {
bgcolor=bg.split("$")[0];
text=bg.split("$")[1];
document.getElementById("levelColor").style.backgroundColor = bgcolor;
document.getElementById("levelColor").innerHTML = "this is the " + text+ " level";
}
function changeLevel(){
var name = document.getElementById("hasName");
var age = document.getElementById("olderThan");
if (name.value == "No" && age.value=="10") {
document.getElementById("level").selectedIndex=1;
changeColor("#00FF00$second");
}
}
</script>
</body>
</html>

Ah, I see what the problem is now. Thanks for clarifying things.

lovetolearn
09-11-2011, 08:43 PM
... but the way you are doing it, with a changeColor and changeLevel function doing similar things might start to get complicated - notice how if hasName is No and olderThan is 10, you can still change the table contents by changing level?

maybe you want that, or maybe it would be better to fold the two functions into one...


<html>
<head>
<title>Test Page</title>
</head>
<body>
<form name="myform">
<select id="level" onChange="changeColor()">
<option value="#FF0000$first">1</option>
<option value="#00FF00$second">2</option>
<option value="#0000FF$third">3</option>
<option value="#DD0000$fourth">4</option>
<option value="#AA0000$fifth">5</option>
</select>
<select id="hasName" onChange="changeColor()">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<select id="olderThan" onChange="changeColor()">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select></form>
<br><br>
<center>
<table width="700px" height="100px" cellspacing="0" cellpadding="0" border="1">
<tr>
<td id="levelColor"><center>This is the level.</center></td>
</tr>
</table>
</center>

<script type="text/javascript">
document.getElementById("levelColor").style.textAlign="center";
function changeColor() {
var name = document.getElementById("hasName").value;
var age = document.getElementById("olderThan").value;
var bg = document.getElementById("level").value;
if (name == "No" && age=="10") {
document.getElementById("level").selectedIndex=1;
document.getElementById("levelColor").style.backgroundColor = "#00FF00";
document.getElementById("levelColor").innerHTML = "this is the second level";
} else {
bgcolor=bg.split("$")[0];
text=bg.split("$")[1];
document.getElementById("levelColor").style.backgroundColor = bgcolor;
document.getElementById("levelColor").innerHTML = "this is the " + text+ " level";
}
}
</script>
</body>
</html>

Hmmm, just a few quick questions:

What are some of the advantages of folding the two functions together?

Can you please explain what is the use of the split function in the else?

Thanks for all your help.

xelawho
09-11-2011, 09:19 PM
I explained the (possible) advantage of folding the two functions together in post #8 - it depends on how you want it to work if you want to do that.

The split is there because the way this started out it was easier to pass two values (the background color and the level number, separated by the $) when a selection was made in the dropdown menu. The split separates those out so we can use them to assign values to their prospective elements.

lovetolearn
09-11-2011, 09:25 PM
I explained the (possible) advantage of folding the two functions together in post #8 - it depends on how you want it to work if you want to do that.

The split is there because the way this started out it was easier to pass two values (the background color and the level number, separated by the $) when a selection was made in the dropdown menu. The split separates those out so we can use them to assign values to their prospective elements.

Thanks for the explanation, now I understand.

Should I use to the split for all the combinations of picklist "hasName" and picklist "olderThan?"

xelawho
09-11-2011, 09:30 PM
there are no combinations there. if you look at this:
<option value="#FF0000$first">

you see that there are two values: #FF0000 and first, separated by the $

so we need to split them apart to use them. This:
<option value="Yes">Yes</option>

is just one value, so we can use it as is.

lovetolearn
09-11-2011, 09:31 PM
there are no combinations there. if you look at this:
<option value="#FF0000$first">

you see that there are two values: #FF0000 and first, separated by the $

so we need to split them apart to use them. This:
<option value="Yes">Yes</option>

is just one value, so we can use it as is.

OHHH. sorry I misunderstood for a second. oh okay, thanks for clearing that up.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum