change text color with a button

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • liglin
    #1

    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>Untitl ed Document</TITLE>
    <META http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    </HEAD>

    <BODY bgcolor="#FFFFF F" text="#000000">
    This is an<b onmouseout="thi s.style.color = 'black';"
    onmouseover="th is.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>
    Tags: None
    • Evertjan.
      #2
      Re: change text color with a button

      liglin wrote on 06 feb 2004 in comp.lang.javas cript:
      [color=blue]
      > 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.[/color]
      [color=blue]
      > This is an<b onmouseout="thi s.style.color = 'black';"
      > onmouseover="th is.style.color = 'red';" align="justify" >
      > example </b>of changing the color of text using a MouseOver.
      > <INPUT type="submit" name="Submit" value="Change color">[/color]

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

      <button
      onclick='docume nt.getElementBy Id("mybold").st yle.color=
      "red"'[color=blue]
      >Change color</button>[/color]

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

        Comment

        • Brian Genisio
          #3
          Re: change text color with a button

          liglin wrote:[color=blue]
          > 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>Untitl ed Document</TITLE>
          > <META http-equiv="Content-Type" content="text/html;
          > charset=iso-8859-1">
          > </HEAD>
          >
          > <BODY bgcolor="#FFFFF F" text="#000000">
          > This is an<b onmouseout="thi s.style.color = 'black';"
          > onmouseover="th is.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>[/color]

          Here ya go...

          <HTML>
          <HEAD>
          <TITLE>Untitl ed Document</TITLE>
          </HEAD>

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

          toggle = !toggle;
          }
          </SCRIPT>

          <BODY bgcolor="#FFFFF F" text="#000000">

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

          </BODY>
          </HTML>

            Comment

            • liglin
              #4
              Re: change text color with a button

              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." <exjxw.hannivoo rt@interxnl.net > wrote in message news:<Xns9487B8 D51CFCAeejj99@1 94.109.133.29>. ..[color=blue]
              > liglin wrote on 06 feb 2004 in comp.lang.javas cript:
              >[color=green]
              > > 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.[/color]
              >[color=green]
              > > This is an<b onmouseout="thi s.style.color = 'black';"
              > > onmouseover="th is.style.color = 'red';" align="justify" >
              > > example </b>of changing the color of text using a MouseOver.
              > > <INPUT type="submit" name="Submit" value="Change color">[/color]
              >
              > <b id="mybold"
              > style="color:bl ack;">
              > example</b>
              >
              > <button
              > onclick='docume nt.getElementBy Id("mybold").st yle.color=
              > "red"'[color=green]
              > >Change color</button>[/color][/color]

                Comment

                • liglin
                  #5
                  Re: change text color with a button

                  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 <BrianGenisio@y ahoo.com> wrote in message news:<4023cc8d@ 10.10.0.241>...[color=blue]
                  > liglin wrote:[color=green]
                  > > 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>Untitl ed Document</TITLE>
                  > > <META http-equiv="Content-Type" content="text/html;
                  > > charset=iso-8859-1">
                  > > </HEAD>
                  > >
                  > > <BODY bgcolor="#FFFFF F" text="#000000">
                  > > This is an<b onmouseout="thi s.style.color = 'black';"
                  > > onmouseover="th is.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>[/color]
                  >
                  > Here ya go...
                  >
                  > <HTML>
                  > <HEAD>
                  > <TITLE>Untitl ed Document</TITLE>
                  > </HEAD>
                  >
                  > <SCRIPT>
                  > var toggle = true;
                  > function changeColor()
                  > {
                  > document.getEle mentById('bID') .style.color =
                  > toggle ? "red" : "black";
                  >
                  > toggle = !toggle;
                  > }
                  > </SCRIPT>
                  >
                  > <BODY bgcolor="#FFFFF F" text="#000000">
                  >
                  > This is an <b id=bID>example</b>of changing color with a button
                  > <BUTTON onClick="change Color()">Change Color</BUTTON>
                  >
                  > </BODY>
                  > </HTML>[/color]

                    Comment

                    • Robert
                      #6
                      change text color with a button

                      Thanks for the post. This is just the code I have been looking for!

                      Robert

                        Comment

                        • Brian Genisio
                          #7
                          Re: change text color with a button

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

                          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.getEle mentById(). 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.get ElementById)
                          ... use getElementById
                          else if (document.all)
                          ... use document.all

                          Brian

                            Comment

                            Previous template Next
                            Working...