Cell color dependant upon select menu values 1

hedidit · Sep 22, 2006

Hi,
I've got two select menus on a form which contain numbers. I'd like to have a cell background color change depending upon how much the two selected values multiply to... e.g.

select value1*select value2=color of cell.
There'd be a range of values so from 1 to 5 would be blue, 6-10 would be orange 10-15 would be red etc.

I've ssen a fair few examples of how to change a cell color but not depending upon the value of two multipled values... can anyone give me any pointers?

Cheers in advance

1DMF · Sep 22, 2006

select value1*select value2=color of cell.

you need to convert the decimal number to hex or use RGB syntax for a starter. getting the values og select list is easy.

var colval = document.getElementByID('select1').value * document.getElementByID('select2').value.

convert colvar to HEX or RGB and then update the cell.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

hedidit · Sep 25, 2006

Hi 1DMF,

Thanks for the reply, I've been trying to put what yousaid ino a function but am having trouble. I usually program in vbscript / ASP and so was wondering whether you could pad out the example a bit?

Cheers again

1DMF · Sep 25, 2006

is this range thing exactly what you want so 1-5 = #0000FF or is it a variation, if you need an algorithm to work out the val1 * val2 = hex/rgb , then i'm not the man for the job, but the basics for the HTML action is simple.
HTML

Code:

<select id="select1" onchange="changeCol();">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="select2" onchange="changeCol();">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

javascript function

Code:

<script>
function changeCol(){

if(document.getElementById('select1').value != "" && document.getElementById('select2').value != ""){

var colval = document.getElementById('select1').value * document.getElementById('select2').value;

//########################
//YOU NEED TO CONVERT the value of colval to 
//HEX or if it's a simple scale then...
//############################

if(colval <= 5){colval = "#0000FF";}

//etc... for the max range possible  

//#################################
//then to change the cell
//####################################

document.getElementById('cell_ID').style.backgroundColor = colval;

}
</script>

you'll need to get rid of my comments and don't forget to give the cell on the page you want to change an id and replace 'cel_ID' with it.

Hope this makes sense

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

hedidit · Sep 25, 2006

Wow thanks for the quick reply and code! I've tried it on my 'live' page and it can't get it to work so have now pasted it into a blank page as below and still not working... any ideas what I've done wrong? BEt it's something stupid!

Code:

<HTML>
<HEAD>
<script>
function changeCol(){

if(document.getElementById('select1').value != "" && document.getElementById('select2').value != ""){

var colval = document.getElementById('select1').value * document.getElementById('select2').value;



if(colval <= 25){colval = "#0000FF";}



document.getElementById('cell_ID').style.backgroundColor = colval;

}
</script>
</HEAD>
<BODY>
<Table>

<tr>
<td>
<select id="select1" onchange="changeCol();">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="select2" onchange="changeCol();">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td id="cell_ID">HELLO</td>
</tr>
</Table>
</BODY>
</HTML>

1DMF · Sep 25, 2006

there is a missing curly brace :-(

here is the working code...

Code:

<HTML>
<HEAD>
<script>
function changeCol(){

  if(document.getElementById('select1').value != "" && document.getElementById('select2').value != ""){

     var colval = document.getElementById('select1').value * document.getElementById('select2').value;



     if(colval <= 25){colval = "#0000FF";}



     document.getElementById('cell_ID').style.backgroundColor = colval;

   }

[b]} <------ Extra brace, remove this text![/b]
</script>
</HEAD>
<BODY>
<Table>

<tr>
<td>
<select id="select1" onchange="changeCol();">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="select2" onchange="changeCol();">
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td id="cell_ID">HELLO</td>
</tr>
</Table>
</BODY>
</HTML>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Cell color dependant upon select menu values 1

hedidit

Technical User

1DMF

Programmer

hedidit

Technical User

1DMF

Programmer

hedidit

Technical User

1DMF

Programmer

Similar threads

Part and Inventory Search

Sponsor