change text color with a button

liglin · Feb 6, 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>

Evertjan. · Feb 6, 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.color=
"red"'

Brian Genisio · Feb 6, 2004

liglin said:
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>

liglin · Feb 7, 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.

liglin · Feb 7, 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 · Feb 9, 2004

liglin said:
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

<Button ...> display is fine, except for two things	1	Oct 23, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Centering a button using flexbox	2	Feb 5, 2023
How can I arrange a series of radio buttons?	2	Jan 25, 2024
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Help needed with thank you message	5	Sep 11, 2021
Im having trouble containing a title an image and a button	2	Oct 26, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023

change text color with a button

liglin

Evertjan.

Brian Genisio

liglin

liglin

Brian Genisio

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads