3 Replies - 356 Views - Last Post: 19 October 2011 - 01:28 PM

#1 Bupe Germaine  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 14-October 11

Changing the colors of a page.

Posted 14 October 2011 - 03:07 AM

how can i dynamically change the color of values on a page, to show if they are above or below a target value entered in a text box on the page.
Those below should be shown in green, those above in red, and identical (equal) should be in amber.

Hint: values can be put in a particular tag and then use the getElementsByTagName.
Is This A Good Question/Topic? 0
  • +

Replies To: Changing the colors of a page.

#2 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2872
  • View blog
  • Posts: 11,031
  • Joined: 15-July 08

Re: Changing the colors of a page.

Posted 14 October 2011 - 03:20 AM

Topic Renamed and moved to Javascript. Please leave the introduce yourself forum to...well introductions.

Thanks. :)
Was This Post Helpful? 0
  • +
  • -

#3 Tilea  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 11-April 11

Re: Changing the colors of a page.

Posted 14 October 2011 - 05:07 AM

In order to change the color of an element on a page, make sure it has a unique id.

Then, use this method to access it:

var status = document.getElementById("myElement");



This creates a javascript object that holds the information for the HTML element you want to change. The variable can be whatever you want, but make sure the name in quotes matches exactly the 'id' attribute of the element.

Then, to change the color, all you need to do is access the style attribute of that element:

status.style.color = "red";



And that's how you change the color. Did you need to know the complete JS code, or do you know enough to get the math and condition testing on your own?
Was This Post Helpful? 0
  • +
  • -

#4 Sho Ke  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 110
  • View blog
  • Posts: 250
  • Joined: 13-October 11

Re: Changing the colors of a page.

Posted 19 October 2011 - 01:28 PM

There are lots of ways to do this, one of them being this:
<html>
<head>
<title>Colors!</title>

<script type="text/javascript">
function readResponse() {
	//the line below retrieves the number you are comparing and assigns it to a variable called targetNumber.
	var targetNumber = document.colorTest.number.value;
	//first case, 0
	if (document.colorTest.zero.value < targetNumber) {document.colorTest.zero.style.background = "red";}
	else if (document.colorTest.zero.value == targetNumber)  {document.colorTest.zero.style.background = "blue";}
	else {document.colorTest.zero.style.background = "green";} // Note that this line is not checking to see if the number is above 0. Since we know the number is not 0, nor is it below 0, it must be above, therefore we can simply use else instead of another "else if".


	}
</script>
</head>
<body>
<div>
<form name="colorTest">

<input  name="zero" type="text" value="0" />
<input  name="one" type="text" value="1" />
<input  name="two" type="text" value="2" />
<input  name="three" type="text" value="3" />
<input  name="four" type="text" value="4" />
<input  name="five" type="text" value="5"  style="margin-bottom:10px;"/> <br />
<input type="text" id="targetValue" name="number" value="" onkeypress="{if (event.keyCode==13)readResponse()}" style="width:200px;" /> <br />
Enter the Target Value and press enter to color code the input fields!
<input type="button" onclick="readResponse();" value="Gogogo!" />
</body>
</html>


This is probably the most basic way, however, and just by glancing at it you can see it isn't ideal. Using this method, it took 3 lines(or 274characters) worth of space just to compare the target number one preset number.

In the code above, the function retrieves the value the user enters, and assigns that value to a variable.
It then compares the variable's value to a preset value, 0 in this example.
One of the following 3 conditions could happen:
If the preset number is < (less than) the target value, the background turns red.
If the above statement isn't true, and the preset number is equal to the target value, the background turns blue.
Otherwise*, the background will turn green.


Notice how in the code, else is used to(possibly) turn the background green. Since the function just checked to see if the variable targetNumber is less than(line 10), or equal(line 11) to the preset number(0), we humans already know the only other possible outcome would be that targetNumber is greater than 0, so we can save some time by using else, instead of another else if...

Again, this is probably the least useful way of comparing numbers to another, but it still works.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1