PDA

View Full Version : How do I change text color with JS?

Grant Palin
10-28-2002, 05:24 AM
I'm trying to write a script that uses button clicks to change the page's background color. I use the following function, which works fine:
function changeBgColor(color) {
document.bgColor = color;
}

However, I don't know how to change the color of text on the same page. Again, I have bttons, and a script outlined as follows:
function changeTextColor(color) {
document.color = color;
}
This, however, does not work. When clicking those buttons, I get a script error. How can I change the text color with javascript? What's the right syntax/keywords to use?
beetle
10-28-2002, 05:28 AM
function changeTextColor(color) {
document.body.style.color = color;
}

function changeBgColor(color) {
document.body.style.backgroundColor = color;
}
glenngv
10-28-2002, 05:33 AM
...or

document.body.text="blue";

although document.body.style.color is better. :)
Grant Palin
10-28-2002, 05:42 AM
Thanks, that worked.
einbeiniger
10-28-2002, 09:38 AM
can you be so kind as to post the entire script here? i'm wondering what it looks like.
and as well please the html parts.

thank you
Grant Palin
10-29-2002, 02:29 AM
<html>
<head>
<title>Background and Text Colors</title>
<script language="Javascript">
<!--
function changeBgColor(color) {
document.body.style.backgroundColor = color;
}

function changeTextColor(color) {
document.body.style.color = color;
}
//-->
</script>
</head>

<body bgcolor="gray" text="white">

<p>Click a button to change the background color.</p>

<form>
<input type="button" value="red" onClick="changeBgColor(value)">
<input type="button" value="green" onClick="changeBgColor(value)">
<input type="button" value="blue" onClick="changeBgColor(value)">
<input type="button" value="black" onClick="changeBgColor(value)">
</form>

<br>
<br>
<p>Click a button to change the text color.</p>
<form>
<input type="button" value="red" onClick="changeTextColor(value)">
<input type="button" value="green" onClick="changeTextColor(value)">
<input type="button" value="blue" onClick="changeTextColor(value)">
<input type="button" value="black" onClick="changeTextColor(value)">
</form>

</body>
</html>
beetle
10-29-2002, 02:43 AM
If I'm not mistaken, Grant, that should be<html>
<head>
<title>Background and Text Colors</title>
<script language="Javascript">
<!--
function changeBgColor(color) {
document.body.style.backgroundColor = color;
}

function changeTextColor(color) {
document.body.style.color = color;
}
//-->
</script>
</head>

<body bgcolor="gray" text="white">

<p>Click a button to change the background color.</p>

<form>
<input type="button" value="red" onClick="changeBgColor(this.value)">
<input type="button" value="green" onClick="changeBgColor(this.value)">
<input type="button" value="blue" onClick="changeBgColor(this.value)">
<input type="button" value="black" onClick="changeBgColor(this.value)">
</form>

<br>
<br>
<p>Click a button to change the text color.</p>
<form>
<input type="button" value="red" onClick="changeTextColor(this.value)">
<input type="button" value="green" onClick="changeTextColor(this.value)">
<input type="button" value="blue" onClick="changeTextColor(this.value)">
<input type="button" value="black" onClick="changeTextColor(this.value)">
</form>

</body>
</html>
chrismiceli
10-29-2002, 03:40 AM
beetle is right, it is this.value or if you like typing
document.forms[0].elements[0].value
Grant Palin
10-29-2002, 05:27 AM
Why? It works just fine...
einbeiniger
10-29-2002, 06:40 PM
the code is just fine as:

...........................................................
<html><head>
<script language="Javascript">
function changeBgColor(color) {
document.body.style.backgroundColor = color;
}
function changeTextColor(color) {
document.body.style.color = color;
}
</script>
</head>


<body>

<p>Klicke, um die Farbe des Hintergrundes zu ver&auml;ndern.</p>
<form>
<input type="button" value="rot" onClick="changeBgColor(this.value)">
<input type="button" value="grün" onClick="changeBgColor(this.value)">
<input type="button" value="blau"onClick="changeBgColor(this.value)">
<input type="button" value="schwarz" onClick="changeBgColor(this.value)">
</form>

<br>
<br>

<p>Klicke, um die Farbe des Textes zu verändern.</p>
<form>
<input type="button" value="red" onClick="changeTextColor(this.value)">
<input type="button" value="green" onClick="changeTextColor(this.value)">
<input type="button" value="blue" onClick="changeTextColor(this.value)">
<input type="button" value="black" onClick="changeTextColor(this.value)">
</form>

</body>
</html>
............................................................


you see, i just want to change the words into german, but of course only the second part, the changing of the text color works, as "rot" etc are no valid colors, of course.
can you tell me, how to change the code, so that the word appear in german, but that it still works? (i know i'm rather undereducated, but i'm still very, very young...) :cool: :o

i hope the problem is clearly pointed out, and thanks for the (hopefully) following help...
joh6nn
10-29-2002, 07:04 PM
<p>Klicke, um die Farbe des Hintergrundes zu verändern.</p>
<form>
<input type="button" value="rot" onClick="changeBgColor('red')">
<input type="button" value="grün" onClick="changeBgColor('green')">
<input type="button" value="blau"onClick="changeBgColor('blue')">
<input type="button" value="schwarz" onClick="changeBgColor('black')">
</form>
einbeiniger
10-30-2002, 09:35 AM
thanks, i'm working on my skills......
Grant Palin
11-14-2002, 05:37 AM
Why? What difference does it make?

Originally posted by beetle
If I'm not mistaken, Grant, that should be<html>
<head>
<title>Background and Text Colors</title>
<script language="Javascript">
<!--
function changeBgColor(color) {
document.body.style.backgroundColor = color;
}

function changeTextColor(color) {
document.body.style.color = color;
}
//-->
</script>
</head>

<body bgcolor="gray" text="white">

<p>Click a button to change the background color.</p>

<form>
<input type="button" value="red" onClick="changeBgColor(this.value)">
<input type="button" value="green" onClick="changeBgColor(this.value)">
<input type="button" value="blue" onClick="changeBgColor(this.value)">
<input type="button" value="black" onClick="changeBgColor(this.value)">
</form>

<br>
<br>
<p>Click a button to change the text color.</p>
<form>
<input type="button" value="red" onClick="changeTextColor(this.value)">
<input type="button" value="green" onClick="changeTextColor(this.value)">
<input type="button" value="blue" onClick="changeTextColor(this.value)">
<input type="button" value="black" onClick="changeTextColor(this.value)">
</form>

</body>
</html>
glenngv
11-14-2002, 06:01 AM
Surprisingly, nothing! :eek:

try running this simple example:

<html>
<body>
<form>
<script language="javascript">
var type="mytype";
var name="myname";
var value="myvalue";
alert(type+'\n'+name+'\n'+value);
</script>
<input type="button" name="GreenName" value="green" onClick="alert(type+'\n'+name+'\n'+value)">
<br>
<input type="button" name="BlueName" value="blue" onClick="alert(this.type+'\n'+this.name+'\n'+this.value)">
</form>
</body>
</html>

but for good programming practice, beetle's way is more appropriate and not confusing :)
beetle
11-14-2002, 06:55 AM
Most interesting. It is apparent to me (now) that the this is inherited, regardless of what we might think is a global scope conflict, but is not because of this inheritance. So, to properly access the global variables type, name, and value we need the window object:<html>
<body>
<form>
<script language="javascript">
var type="mytype";
var name="myname";
var value="myvalue";
alert(type+'\n'+name+'\n'+value);
</script>
<input type="button" name="GreenName" value="green" onClick="alert(type+'\n'+name+'\n'+value)">
<br>
<input type="button" name="BlueName" value="blue" onClick="alert(window.type+'\n'+window.name+'\n'+window.value)">
</form>
</body>
</html>Certainly interesting indeed.