Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Change background color of html table using js

    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.

    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.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    just a couple of minor issues...

    Code:
    <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>

  • Users who have thanked xelawho for this post:

    lovetolearn (09-10-2011)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Thank you.

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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."

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it would...

    Code:
    <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>
    Last edited by xelawho; 09-11-2011 at 12:41 AM. Reason: text alignment

  • Users who have thanked xelawho for this post:

    lovetolearn (09-11-2011)

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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.

    Code:
    <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>

  • Users who have thanked xelawho for this post:

    lovetolearn (09-11-2011)

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts

    but...

    ... 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...

    Code:
    <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>

  • Users who have thanked xelawho for this post:

    lovetolearn (09-11-2011)

  • #9
    New Coder
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    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.

    Code:
    <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.

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    ... 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...

    Code:
    <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.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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.

  • #12
    New Coder
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    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?"

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,968
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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.

  • #14
    New Coder
    Join Date
    Sep 2011
    Posts
    24
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •