JavaScript - Selectively changing font color

Factual Questions
1

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.

2

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

3

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.

4

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.


<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>
5

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).

6

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