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

change text color with a button

P: n/a
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>
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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)
Jul 20 '05 #2

P: n/a
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>

Jul 20 '05 #3

P: n/a
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." <ex**************@interxnl.net> wrote in message news:<Xn********************@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>

Jul 20 '05 #4

P: n/a
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 <Br**********@yahoo.com> wrote in message news:<40******@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>

Jul 20 '05 #5

P: n/a
Thanks for the post. This is just the code I have been looking for!

Robert
Jul 20 '05 #6

P: n/a
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

Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.