How Can I Highlight A Specific Area

This site is best viewed in a modern browser with JavaScript enabled.

trifolium

Quick question. I will try explain what I want to do and what I have in place so far in as much detail as I can.

Ok I have an html page with a series of dropdowns and once one is selected the information is pulled from the javascript file which I have already added the values to which are then displayed in 6 boxes to the right of the dropdown.

Now my question is how can I either in the javascript file or the html file highlight a particular box if it is greater than a certain value?

Lets say for example I have a value in the javascript file that is 14 and I want highlight this, is there a line of code that I can add myself that will highlight the text box from the html file that houses this value?

JMRKER

Can you provide a brief example of the HTML code you are using? Any CSS info?

Have you tried any JS coding yourself? Results?

shophiarajan47

As JMRKER said try to post some code here to let us know what you worked on and how we can change to help what you want to achieve.

trifolium

Ok here is a small example from the first output for the html file.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Tracks</title>
   <script src="tracks.js"></script>
</head>
<body>
<table>
<thead>
   <tr>
	<th colspan="3"></th>
	<th>1</th>
	<th>2</th>
	<th>3</th>
	<th>A</th>
	<th>B</th>
	<th>C</th>
	<th colspan="2"></th>
   </tr>
</thead>
<tbody>
   <tr><td colspan="11"><hr /></td></tr>
   <tr>
	<td style="text-align:right;">Trap 1:</td>
	<td><select id="track" name="track" onchange="track(this,tr11,tr12,tr13,tr14,tr15,tr16,tr21,tr22,tr23,tr24,tr25,tr26,trp)">
		<option value="">Choose one</option>
		<option value="P A Tompsett">P A Tompsett</option>
			    </select></td>
	<td style="text-align:right;">1:</td>
	<td><input type="text" size="3" readonly id="tr11" class="FTw1" /></td>
	<td><input type="text" size="3" readonly id="tr12" class="FBw1" /></td>
	<td><input type="text" size="3" readonly id="tr13" class="FTp1" /></td>
	<td><input type="text" size="3" readonly id="tr14" class="FBp1" /></td>
	<td><input type="text" size="3" readonly id="tr15" class="FTt1" /></td>
	<td><input type="text" size="3" readonly id="tr16" class="FBt1" /></td>
	<td style="text-align:right;">%:</td>
	<td><input type="text" size="3" readonly id="trp" class="perc" /></td>
   </tr>

Ok so basically I know this creates a dropdown box with an option called P A Tompsett.

It then calls the javascript file where I have values loaded in order to fill the text boxes in the html.

Here is the javascript.

function track(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
   switch(el.value){
     case 'P A Tompsett':
	oneone.value='0';
	onetwo.value='21';
	onethree.value='14';
	onefour.value='5';
	onefive.value='26';
	onesix.value='19';
     break;
     default:
	oneone.value='';
	onetwo.value='';
	onethree.value='';
	onefour.value='';
	onefive.value='';
	onesix.value='';
     break;
   }
   total();
}

Ok so quick explanation is that once P A Tompsett is selected from the drop down the values in the boxes are filled as 0, 21, 14, 5, 26, 19

Ok now that this is out of the way I would like to be able to highlight the text boxes that show the numbers 21,14,26,19

How do I go about this?

root

It is not clear what your objective is or why your data that appears to be static needs to populate an element that can be completed in HTML.

What is it that you are trying to do?

JMRKER

This fixes you initial errors (you can put in more if you want, just check the error console when you do )

Note: Having only one drop-down selection limits the number of ways the current script can be tested.

Since the text boxes to be highlighted (not currently defined as far as I can see) have different numbers from the filled boxes,
how do you determine which text box (not currently defined) are to be selected?

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Tracks</title>
</head>
<body>
<table>
<thead>
   <tr>
	<th colspan="3"></th>
	<th>1</th>
	<th>2</th>
	<th>3</th>
	<th>A</th>
	<th>B</th>
	<th>C</th>
	<th colspan="2"></th>
   </tr>
</thead>
<tbody>
   <tr><td colspan="11"><hr /></td></tr>
   <tr>
	<td style="text-align:right;">Trap 1:</td>
	<td><select id="track" name="track" onchange="track(this,tr11,tr12,tr13,tr14,tr15,tr16,trp)">
		<option value="">Choose one</option>
		<option value="P A Tompsett">P A Tompsett</option>
	    </select>
        </td>
	<td style="text-align:right;">1:</td>
	<td><input type="text" size="3" readonly id="tr11" class="FTw1" /></td>
	<td><input type="text" size="3" readonly id="tr12" class="FBw1" /></td>
	<td><input type="text" size="3" readonly id="tr13" class="FTp1" /></td>
	<td><input type="text" size="3" readonly id="tr14" class="FBp1" /></td>
	<td><input type="text" size="3" readonly id="tr15" class="FTt1" /></td>
	<td><input type="text" size="3" readonly id="tr16" class="FBt1" /></td>
	<td style="text-align:right;">%:</td>
	<td><input type="text" size="3" readonly id="trp" class="perc" /></td>
   </tr>
</tbody>

<script type="text/javascript">
function track(el,oneone,onetwo,onethree,onefour,onefive,onesix,twoone,twotwo,twothree,twofour,twofive,twosix,perc){
   switch(el.value){
     case 'P A Tompsett':
	oneone.value='0';
	onetwo.value='21';
	onethree.value='14';
	onefour.value='5';
	onefive.value='26';
	onesix.value='19';
     break;
     default:
	oneone.value='';
	onetwo.value='';
	onethree.value='';
	onefour.value='';
	onefive.value='';
	onesix.value='';
     break;
   }
//   total();  // not defined yet!
}
function total() { alert('Not defined yet!'); }
</script>

</body>
</html

Note: There are better ways to pass parameters in your track function than listing un-available elements.

Also, do you have your CSS classes defined to see what the actual format looks like?

JMRKER

As with '\.\', I'm confused about the usage, but here is an alternative to consider...

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Tracks</title>
<style type="text/css">
 .trk { width:3em; }
</style>

</head>
<body>
<table>
<thead>
   <tr>
	<th colspan="3"></th>
	<th>1</th>	<th>2</th>	<th>3</th>	<th>A</th>
	<th>B</th>	<th>C</th>	<th colspan="2"></th>
   </tr>
</thead>
<tbody>
   <tr><td colspan="11"><hr /></td></tr>
   <tr>
	<td style="text-align:right;">Trap 1:</td>
	<td><select id="track" name="track" onchange="track(this.value)">
		<option value="Choose one:,,,,,,">Choose one</option>
		<option value="P A Tompsett,0,21,14,5,26,19">P A Tompsett</option>
		<option value="J Q Smith,19,26,5,14,21,0">J Q Smith</option>
		<option value="I M Confused,A,B,C,D,E,F">I M Confused</option>
	    </select>
        </td>
	<td style="text-align:right;">1:</td>
	<td><input type="text" readonly id="tr11" class="FTw1 trk" /></td>
	<td><input type="text" readonly id="tr12" class="FBw1 trk" /></td>
	<td><input type="text" readonly id="tr13" class="FTp1 trk" /></td>
	<td><input type="text" readonly id="tr14" class="FBp1 trk" /></td>
	<td><input type="text" readonly id="tr15" class="FTt1 trk" /></td>
	<td><input type="text" readonly id="tr16" class="FBt1 trk" /></td>
	<td style="text-align:right;">%:</td>
	<td><input type="text" size="3" readonly id="trp" class="perc" /></td>
   </tr>
</tbody>

<script type="text/javascript">
function track(info){
  var arr = info.split(',');
  var trks = document.getElementsByClassName('trk');
  for (var i=0; i<trks.length; i++) {
    trks[i].value = arr[i+1];
    if (Number(arr[i+1]) >= 14) { trks[i].style.backgroundColor = '#ff00ff'; }
                           else { trks[i].style.backgroundColor = '#ffffff'; }
  }
//   total();  // not defined yet!
}
function total() { alert('Not defined yet!'); }
</script>

</body>
</html

trifolium

Hey guys, I have got the script working now everything is great, I just need to know how to highlight those boxes specified

JMRKER

trifolium;1339035 wrote:
Hey guys, I have got the script working now everything is great, I just need to know how to highlight those boxes specified

Well that's great but usually forum members show how they solved their problems when they make changes or have their problem resolved.
What did you do and did you notice the highlighting in my previous post?