# JavaScript - Selectively changing font color

**URL:** https://boards.straightdope.com/t/javascript-selectively-changing-font-color/291243
**Category:** Factual Questions
**Created:** [February 21, 2005, 10:26pm UTC](https://boards.straightdope.com/t/javascript-selectively-changing-font-color/291243 "2005-02-21T22:26:51Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![wolf\_meister](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/wolf_meister/32/15202_2.png) [@wolf\_meister](https://boards.straightdope.com/u/wolf_meister)
#### Post date: [February 21, 2005, 10:26pm UTC](https://boards.straightdope.com/t/javascript-selectively-changing-font-color/291243/1 "2005-02-21T22:26:51Z")

</div>

Is it possible to have the user control how the font color of _one word_ would be displayed?  
I was trying to do this by having form buttons that, when clicked, would go to a JavaScript routine that could change a word to a certain color.  
For example, I created 3 font color buttons | RED | GREEN | and | BLUE |  
That when clicked should change the font color of just one word.  
For example, clicking the 3 buttons from left to right would have this effect:  
This is the font COLOR.  
This is the font **COLOR**.  
This is the font COLOR.

Before the word “COLOR” I have the tag \<font color=“fntclr”\>, where fntclr is a variable that will be set to a value when either red, green or blue is selected.  
For example, if red is clicked, the Javascript routine makes fntclr=“FF0000”.

Here is the problem. Using “FF0000” dosen’t change the color to red (or anything else). So, am I wrong in thinking I can put a variable in the font color tag?  
If it is allowed, am I doing something incorrect such as using the quotes around the variable? (I have tried all “quote” combinations by the way - both in the variable assignment and the font color tag).

Any help would be greatly appreciated.

---

<div class="post-metadata">

### Author: ![ultrafilter](https://avatars.discourse-cdn.com/v4/letter/u/3d9bf3/32.png) [@ultrafilter](https://boards.straightdope.com/u/ultrafilter)
#### Post date: [February 21, 2005, 10:40pm UTC](https://boards.straightdope.com/t/javascript-selectively-changing-font-color/291243/2 "2005-02-21T22:40:24Z")

</div>

You’ll probably need to use div tags for this.

---

<div class="post-metadata">

### Author: ![ouryL](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/ouryl/32/6067_2.png) [@ouryL](https://boards.straightdope.com/u/ouryL)
#### Post date: [February 21, 2005, 11:35pm UTC](https://boards.straightdope.com/t/javascript-selectively-changing-font-color/291243/3 "2005-02-21T23:35:40Z")

</div>

> [@wolf\_meister](#):
>
> Is it possible to have the user control how the font color of _one word_ would be displayed?  
> I was trying to do this by having form buttons that, when clicked, would go to a JavaScript routine that could change a word to a certain color.  
> For example, I created 3 font color buttons | RED | GREEN | and | BLUE |  
> That when clicked should change the font color of just one word.  
> For example, clicking the 3 buttons from left to right would have this effect:  
> This is the font COLOR.  
> This is the font **COLOR**.  
> This is the font COLOR.
> 
> Before the word “COLOR” I have the tag \<font color=“fntclr”\>, where fntclr is a variable that will be set to a value when either red, green or blue is selected.  
> For example, if red is clicked, the Javascript routine makes fntclr=“FF0000”.
> 
> Here is the problem. Using “FF0000” dosen’t change the color to red (or anything else). So, am I wrong in thinking I can put a variable in the font color tag?  
> If it is allowed, am I doing something incorrect such as using the quotes around the variable? (I have tried all “quote” combinations by the way - both in the variable assignment and the font color tag).
> 
> Any help would be greatly appreciated.

I have seen it done before: the letters of a block paragraph were colored to suggest the American flag. I saved it but lost it on my last computer crash.

---

<div class="post-metadata">

### Author: ![Omphaloskeptic](https://avatars.discourse-cdn.com/v4/letter/o/bcef8e/32.png) [@Omphaloskeptic](https://boards.straightdope.com/u/Omphaloskeptic)
#### Post date: [February 21, 2005, 11:41pm UTC](https://boards.straightdope.com/t/javascript-selectively-changing-font-color/291243/4 "2005-02-21T23:41:13Z")

</div>

Here is one way to do it. For inline text, you want a SPAN tag (not a DIV). Here I add a unique id attribute to retrieve that SPAN element and change its CSS class to one of three values. You can also change the CSS styles directly.

```auto

<html><head><title>RGB</title>
<style type="text/css">
.red { color: #F00; }
.green { color: #0F0; }
.blue { color: #00F; }
</style>
</head>
<body>
This is <span class="red" id="word">wolf_meister</span>'s text.
<br><br>
<script type="text/javascript">
el = document.getElementById("word");
function red() { el.className = "red"; }
function green() { el.className = "green"; }
function blue() { el.className = "blue"; }
</script>
<button onclick="red()">RED</button>
<button onclick="green()">GREEN</button>
<button onclick="blue()">BLUE</button>
</body>
</html>

```

---

<div class="post-metadata">

### Author: ![Omphaloskeptic](https://avatars.discourse-cdn.com/v4/letter/o/bcef8e/32.png) [@Omphaloskeptic](https://boards.straightdope.com/u/Omphaloskeptic)
#### Post date: [February 22, 2005, 1:22am UTC](https://boards.straightdope.com/t/javascript-selectively-changing-font-color/291243/5 "2005-02-22T01:22:09Z")

</div>

> [@wolf\_meister](#):
>
> Before the word “COLOR” I have the tag \<font color=“fntclr”\>, where fntclr is a variable that will be set to a value when either red, green or blue is selected. For example, if red is clicked, the Javascript routine makes fntclr=“FF0000”.
> 
> Here is the problem. Using “FF0000” dosen’t change the color to red (or anything else). So, am I wrong in thinking I can put a variable in the font color tag? If it is allowed, am I doing something incorrect such as using the quotes around the variable? (I have tried all “quote” combinations by the way - both in the variable assignment and the font color tag).

To explain further… The reason that this doesn’t work is that the “color” attribute doesn’t expect a Javascript variable; the HTML parser (which doesn’t know anything about Javascript) parses it as a hex or named color. “fntclr” is not either of these, so it’s just ignored. You could write an inline Javascript snippet to replace “fntclr” with its value using document.write(), but this would only run once (when the document is loaded and parsed).

What you want to do is to make modifications to an existing (already loaded and parsed) HTML document (rather than loading a new one entirely, as with document.open() or redirection). This is what’s called Dynamic HTML (DHTML). Generally a DHTML modification is a two-step process: (1) find the element(s) within the HTML document that you want to modify (e.g., with getElementById() or getElementsByTagName()), and (2) change it somehow (e.g., change its content or CSS style or class, or insert or delete elements within it).

---

<div class="post-metadata">

### Author: ![wolf\_meister](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/wolf_meister/32/15202_2.png) [@wolf\_meister](https://boards.straightdope.com/u/wolf_meister)
#### Post date: [February 23, 2005, 2:48am UTC](https://boards.straightdope.com/t/javascript-selectively-changing-font-color/291243/6 "2005-02-23T02:48:36Z")

</div>

**Omphaloskeptic**  
Thanks for the sample program _and_ thanks for the explanation of why my method was not working.
