change text color with a button

Discussion in 'Javascript' started by liglin, Feb 6, 2004.

  1. liglin

    liglin Guest

    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>
     
    liglin, Feb 6, 2004
    #1
    1. Advertising

  2. liglin

    Evertjan. Guest

    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"'
    >Change color</button>


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Feb 6, 2004
    #2
    1. Advertising

  3. 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>
     
    Brian Genisio, Feb 6, 2004
    #3
  4. liglin

    liglin Guest

    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.color=
    > "red"'
    > >Change color</button>
     
    liglin, Feb 7, 2004
    #4
  5. liglin

    liglin Guest

    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>
     
    liglin, Feb 7, 2004
    #5
  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
     
    Brian Genisio, Feb 9, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt Adams
    Replies:
    0
    Views:
    898
    Matt Adams
    Aug 26, 2003
  2. Kamaljeet Saini
    Replies:
    0
    Views:
    446
    Kamaljeet Saini
    Feb 13, 2009
  3. AFN
    Replies:
    5
    Views:
    391
  4. Replies:
    7
    Views:
    389
    Mick White
    Feb 2, 2005
  5. apparker
    Replies:
    10
    Views:
    382
    apparker
    Apr 3, 2007
Loading...

Share This Page