473,388 Members | 1,417 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,388 software developers and data experts.

change text color with a button

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
6 18530
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
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
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
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
Thanks for the post. This is just the code I have been looking for!

Robert
Jul 20 '05 #6
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Matt Adams | last post by:
As well known I could specify the text color in the body tag like: <BODY TEXT=WHITE LINK=WHITE VLINK=RED ALINK=WHITE> What I want to achieve now is that always (!) the text of the last visited...
5
by: Matt | last post by:
I created 3 hyperlinks, when the user click each link, it will change the color of the text of a link. For example, when user clicks Link1, text Link1 will become red color, but Link2 and Link3...
5
by: AFN | last post by:
I'm trying to set a submit button to change text and color when clicked. Like saying "please wait" instead of "submit" and then changing the background color and text color. All works, except for...
7
by: kroger | last post by:
Hi, one part of my website is at: http://www.psych.nmsu.edu/~jkroger/lab/undergrads.html I want to make the date at the top right darker blue. But when I do that, all the light blue text...
1
by: Yeah | last post by:
I have a multiple choice quiz where I would like to use CSS to change the color of the answers upon clicking them. I would like to present the right and wrong answers up front, rather than direct...
11
by: Yeah | last post by:
I have a multiple choice quiz where I would like to use CSS to change the color of the answers upon clicking them. I would like to present the right and wrong answers up front, rather than direct...
3
by: Ryan Liu | last post by:
Hi, I want to change keywords text color in a text editor. I select RichTextBox and use its Select() method to select keywords line by line, one by one, then change its color. ...
14
by: irfi | last post by:
Hi, Please anyone out there can help me!!!!!!!!!!!! I am building a Data Report in vb6. To make it simple there a three text box on the Report. First for (Date), Second for (In-Time) and the third...
10
by: apparker | last post by:
I'm creating a new GUI for a program and it is for a medical exam. There are so many different things to ask someone during a history it wastes too much space to make checkboxes for everything so I...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.