change text color with a button

02-06-2004

The following script changes the color of text with the onmousover
event. How can it be modified so it changes the text when the button
is clicked? I'd want to avoid layers or CSS.

Thanks, Liglin

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
This is an<b onmouseout="this.style.color = 'black';"
onmouseover="this.style.color = 'red';" align="justify">
example </b>of changing the color of text using a MouseOver.
<INPUT type="submit" name="Submit" value="Change color">
</BODY>
</HTML>

02-06-2004

liglin wrote on 06 feb 2004 in comp.lang.javascript:

> The following script changes the color of text with the onmousover
> event. How can it be modified so it changes the text when the button
> is clicked? I'd want to avoid layers or CSS.

> This is an<b onmouseout="this.style.color = 'black';"
> onmouseover="this.style.color = 'red';" align="justify">
> example </b>of changing the color of text using a MouseOver.
> <INPUT type="submit" name="Submit" value="Change color">

<b id="mybold"
style="color:black;">
example</b>

<button
onclick='document.getElementById("mybold").style.c olor=
"red"'
>Change color</button>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

02-06-2004

liglin wrote:
> The following script changes the color of text with the onmousover
> event. How can it be modified so it changes the text when the button
> is clicked? I'd want to avoid layers or CSS.
>
> Thanks, Liglin
>
>
> <HTML>
> <HEAD>
> <TITLE>Untitled Document</TITLE>
> <META http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">
> </HEAD>
>
> <BODY bgcolor="#FFFFFF" text="#000000">
> This is an<b onmouseout="this.style.color = 'black';"
> onmouseover="this.style.color = 'red';" align="justify">
> example </b>of changing the color of text using a MouseOver.
> <INPUT type="submit" name="Submit" value="Change color">
> </BODY>
> </HTML>

Here ya go...

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
</HEAD>

<SCRIPT>
var toggle = true;
function changeColor()
{
document.getElementById('bID').style.color =
toggle ? "red" : "black";

toggle = !toggle;
}
</SCRIPT>

<BODY bgcolor="#FFFFFF" text="#000000">

This is an <b id=bID>example</b>of changing color with a button
<BUTTON onClick="changeColor()">Change Color</BUTTON>

</BODY>
</HTML>

02-07-2004

Hello Evertjan,
I didn't know about the ID attribute!

Thanks a lot for your help

Liglin

thank you very much for your help.
"Evertjan." <> wrote in message news:<Xns9487B8D51CFCAeejj99@194.109.133.29>...
> liglin wrote on 06 feb 2004 in comp.lang.javascript:
>
> > The following script changes the color of text with the onmousover
> > event. How can it be modified so it changes the text when the button
> > is clicked? I'd want to avoid layers or CSS.
>
> > This is an<b onmouseout="this.style.color = 'black';"
> > onmouseover="this.style.color = 'red';" align="justify">
> > example </b>of changing the color of text using a MouseOver.
> > <INPUT type="submit" name="Submit" value="Change color">
>
> <b id="mybold"
> style="color:black;">
> example</b>
>
> <button
> onclick='document.getElementById("mybold").style.c olor=
> "red"'
> >Change color</button>

02-07-2004

Hello Brian,

thanks a lot for your great help.
I think it's just wonderful that people over the internet help others.

regards,
Liglin

Brian Genisio <> wrote in message news:<4023cc8d@10.10.0.241>...
> liglin wrote:
> > The following script changes the color of text with the onmousover
> > event. How can it be modified so it changes the text when the button
> > is clicked? I'd want to avoid layers or CSS.
> >
> > Thanks, Liglin
> >
> >
> > <HTML>
> > <HEAD>
> > <TITLE>Untitled Document</TITLE>
> > <META http-equiv="Content-Type" content="text/html;
> > charset=iso-8859-1">
> > </HEAD>
> >
> > <BODY bgcolor="#FFFFFF" text="#000000">
> > This is an<b onmouseout="this.style.color = 'black';"
> > onmouseover="this.style.color = 'red';" align="justify">
> > example </b>of changing the color of text using a MouseOver.
> > <INPUT type="submit" name="Submit" value="Change color">
> > </BODY>
> > </HTML>
>
> Here ya go...
>
> <HTML>
> <HEAD>
> <TITLE>Untitled Document</TITLE>
> </HEAD>
>
> <SCRIPT>
> var toggle = true;
> function changeColor()
> {
> document.getElementById('bID').style.color =
> toggle ? "red" : "black";
>
> toggle = !toggle;
> }
> </SCRIPT>
>
> <BODY bgcolor="#FFFFFF" text="#000000">
>
> This is an <b id=bID>example</b>of changing color with a button
> <BUTTON onClick="changeColor()">Change Color</BUTTON>
>
> </BODY>
> </HTML>

02-09-2004

liglin wrote:
> Hello Evertjan,
> I didn't know about the ID attribute!
>
> Thanks a lot for your help
>
> Liglin
>
>

It is very hard to do anything in Javascript with the browser, without
using the ID attribute. All tags have it, and it is how you get access
to the objects.

See document.getElementById(). There are other uses, like in IE,
document.all.id or document.all['id']. Of course, the getElementById is
safer. Look into capability checking...

if(document.getElementById)
... use getElementById
else if (document.all)
... use document.all

Brian

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Changing font color from current font color to black color	Kamaljeet Saini	Ruby	0	02-13-2009 04:58 PM
change text color onclick, and change it back - will post to DB	apparker	Javascript	10	04-03-2007 01:57 PM
Change text color for one document.write but not color of all text?	kroger@princeton.edu	Javascript	7	02-02-2005 01:23 PM
Change text color on a submit button when clicked?	AFN	Javascript	5	07-15-2004 04:05 PM
Change text color of "visited link" back to unvisited color ???	Matt Adams	HTML	0	08-26-2003 10:27 AM