Web Analytics Made Easy - StatCounter Change background color of html table using js - CodingForum

Announcement

Collapse
No announcement yet.

Change background color of html table using js

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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.
    Tags: None
  • #2
    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>

    Comment

    • #3
      Thank you.

      Comment

      • #4
        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."

        Comment

        • #5
          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; Sep 10, 2011, 07:41 PM. Reason: text alignment

          Comment

          • #6
            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.

            Comment

            • #7
              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>

              Comment

              • #8
                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>

                Comment

                • #9
                  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.

                  Comment

                  • #10
                    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.

                    Comment

                    • #11
                      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.

                      Comment

                      • #12
                        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?"

                        Comment

                        • #13
                          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.

                          Comment

                          • #14
                            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.

                            Comment

                            Previous template Next
                            Working...
                            X
                            😀
                            🥰
                            🤢
                            😎
                            😡
                            👍
                            👎