Change colour of text in element

[helraizer1]

Hi all,

On one page of my site I have a form (code below) with an input textbox with the id "message". You type in your message in this field (as the id suggests) and depending on an option in a select element (still part of the form) the text of 'message box' changes to that colour.

form:

<form id="input" method="post" action="<?php echo $PHP_SELF; ?>">
Name: <input id="username" type="text" name="username" onkeyup="countdown(username, 10, used)" maxlength="10" size="10" value="<?php echo $_SESSION['username']; ?>" /> &nbsp;&nbsp;&nbsp; Remaining: <input type="text" disabled="disabled" id="used" size="2" value="10" />
<br /><br/>
<input style="background-color:#1B1B1B; color:#FFFFFF;" id="message" type="text" name="input" size="80" maxlength="75" value="" onkeyup="countdown(input, 75, total)" /> &nbsp;&nbsp;&nbsp; Remaining: <input type="text" disabled="disabled" id="total" size="2" value="75" />
<br /> <br />
Select Text color:
 <select  name="color">
<option value="black" onmousedown="color('message','black')">black</option>
<option value="white" onmousedown="color('message','white')">white</option>
<option value="blue" onmousedown="color('message','blue')">blue</option>
 <option value="aqua" onmousedown="color('message','aqua')">aqua</option>
<option value="red" onmousedown="color('message','red')">red</option>
<option value="yellow" onmousedown="color('message','yellow')">yellow</option>
<option value="orange" onmousedown="color('message','orange')">orange</option>
<option value="green" onmousedown="color('message','green')">green</option>
  </select>
<input id="submit" type="submit" name="submit" value="Send your message" onclick="check()" />
 
</form>

and for the javascript:

function color(elemID, clr) {
 
var table=[];
table['red'] = "#FF0000";
table['green'] = "#00FF00";
table['blue'] = "#0000FF"; 
table['aqua'] = "#00FFFF";
table['yellow'] = "#FFFF00";
table['orange'] = "#FF7F00";
table['black'] = "#DEDEDE";
table['white'] = "#F7F7F7";
 
 
document.getElementById(elemID).style.color=table[clr];
}
 

Every single one works, except for white. If you type and select 'blue' - the text turns blue (in FireFox anyway), if you choose 'green' then the text turns green.

But if you choose 'white' nothing changes.. I can't for life of me work out what's wrong. Can you guys see anything wrong?

Thanks, Sam

[helraizer1]

I have managed to fix it. =)

[drhowarddrfine]

So others may learn, please post your solution.

[helraizer1]

My Chatbox

//before - old code:
    function color(elemID, clr) {
 
 
      var table=[];
      table['red'] = "#FF0000";
      table['green'] = "#00FF00";
      table['blue'] = "#0000FF";
      table['aqua'] = "#00FFFF";
      table['yellow'] = "#FFFF00";
      table['orange'] = "#FF7F00";
      table['black'] = "#DEDEDE";
      table['white'] = "#F7F7F7";
 
      document.getElementById(elemID).style.color=table[clr];
      }
 
//after - new code:
 
function color(elemID, clr) {
 
var table=[];
table['red'] = "#FF0000";
table['green'] = "#00FF00";
table['blue'] = "#0000FF"; 
table['aqua'] = "#00FFFF";
table['yellow'] = "#FFFF00";
table['orange'] = "#FF7F00";
table['black'] = "#000000";
table['white'] = "#FFFFFF";
 
document.getElementById(elemID).style.color=table[clr];
 
if (clr == "black") {
document.getElementById(elemID).style.backgroundColor = "#FFFFFF";
}
else {
document.getElementById(elemID).style.backgroundColor = "#1B1B1B";
} 
//the if statement added isn't part of the solution of the problem, it just aids readability in the text box.
}

 <select  name="color">
<option value="black" onmousedown="color('message','black')">black</option>
<option value="white" onmousedown="color('message','white')">white</option>
<option value="blue" onmousedown="color('message','blue')">blue</option>
<option value="aqua" onmousedown="color('message','aqua')">aqua</option>
<option value="red" onmousedown="color('message','red')">red</option>
<option value="yellow" onmousedown="color('message','yellow')">yellow</option>
<option value="orange" onmousedown="color('message','orange')">orange</option>
<option value="green" onmousedown="color('message','green')">green</option>
  </select>
 

The only way I got it to work is copy the same code from another version of my chatbox, on my site. Which for some reason did work. Both codes look rather similar, yet one works (new) and the other doesn't (old). Can you see why?