By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,796 Members | 1,240 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,796 IT Pros & Developers. It's quick & easy.

Change colour of text in element

100+
P: 118
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:
Expand|Select|Wrap|Line Numbers
  1. <form id="input" method="post" action="<?php echo $PHP_SELF; ?>">
  2. 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" />
  3. <br /><br/>
  4. <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" />
  5. <br /> <br />
  6. Select Text color:
  7.  <select  name="color">
  8. <option value="black" onmousedown="color('message','black')">black</option>
  9. <option value="white" onmousedown="color('message','white')">white</option>
  10. <option value="blue" onmousedown="color('message','blue')">blue</option>
  11.  <option value="aqua" onmousedown="color('message','aqua')">aqua</option>
  12. <option value="red" onmousedown="color('message','red')">red</option>
  13. <option value="yellow" onmousedown="color('message','yellow')">yellow</option>
  14. <option value="orange" onmousedown="color('message','orange')">orange</option>
  15. <option value="green" onmousedown="color('message','green')">green</option>
  16.   </select>
  17. <input id="submit" type="submit" name="submit" value="Send your message" onclick="check()" />
  18.  
  19. </form>
and for the javascript:

Expand|Select|Wrap|Line Numbers
  1. function color(elemID, clr) {
  2.  
  3. var table=[];
  4. table['red'] = "#FF0000";
  5. table['green'] = "#00FF00";
  6. table['blue'] = "#0000FF"; 
  7. table['aqua'] = "#00FFFF";
  8. table['yellow'] = "#FFFF00";
  9. table['orange'] = "#FF7F00";
  10. table['black'] = "#DEDEDE";
  11. table['white'] = "#F7F7F7";
  12.  
  13.  
  14. document.getElementById(elemID).style.color=table[clr];
  15. }
  16.  
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
Oct 28 '07 #1
Share this Question
Share on Google+
3 Replies


100+
P: 118
I have managed to fix it. =)
Oct 29 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
So others may learn, please post your solution.
Oct 29 '07 #3

100+
P: 118
My Chatbox

Expand|Select|Wrap|Line Numbers
  1. //before - old code:
  2.     function color(elemID, clr) {
  3.  
  4.  
  5.       var table=[];
  6.       table['red'] = "#FF0000";
  7.       table['green'] = "#00FF00";
  8.       table['blue'] = "#0000FF";
  9.       table['aqua'] = "#00FFFF";
  10.       table['yellow'] = "#FFFF00";
  11.       table['orange'] = "#FF7F00";
  12.       table['black'] = "#DEDEDE";
  13.       table['white'] = "#F7F7F7";
  14.  
  15.       document.getElementById(elemID).style.color=table[clr];
  16.       }
  17.  
  18. //after - new code:
  19.  
  20. function color(elemID, clr) {
  21.  
  22. var table=[];
  23. table['red'] = "#FF0000";
  24. table['green'] = "#00FF00";
  25. table['blue'] = "#0000FF"; 
  26. table['aqua'] = "#00FFFF";
  27. table['yellow'] = "#FFFF00";
  28. table['orange'] = "#FF7F00";
  29. table['black'] = "#000000";
  30. table['white'] = "#FFFFFF";
  31.  
  32. document.getElementById(elemID).style.color=table[clr];
  33.  
  34. if (clr == "black") {
  35. document.getElementById(elemID).style.backgroundColor = "#FFFFFF";
  36. }
  37. else {
  38. document.getElementById(elemID).style.backgroundColor = "#1B1B1B";
  39. //the if statement added isn't part of the solution of the problem, it just aids readability in the text box.
  40. }

Expand|Select|Wrap|Line Numbers
  1.  <select  name="color">
  2. <option value="black" onmousedown="color('message','black')">black</option>
  3. <option value="white" onmousedown="color('message','white')">white</option>
  4. <option value="blue" onmousedown="color('message','blue')">blue</option>
  5. <option value="aqua" onmousedown="color('message','aqua')">aqua</option>
  6. <option value="red" onmousedown="color('message','red')">red</option>
  7. <option value="yellow" onmousedown="color('message','yellow')">yellow</option>
  8. <option value="orange" onmousedown="color('message','orange')">orange</option>
  9. <option value="green" onmousedown="color('message','green')">green</option>
  10.   </select>
  11.  
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?
Oct 29 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.