Results 1 to 4 of 4

Thread: how to change text and background color same time

  1. #1
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default how to change text and background color same time

    Hi all,

    I'm busy making a site with some cool effects.. This is a part of my code:

    Code:
    <form name="changeColor"> 
    <p><font size="2" face="Verdana,Arial,Helvetica,Sans Serif">Kies een achtergrond kleur: <br> <br>
    <input type="button" name="colr" value="ORANJE" onclick="document.bgColor='#FF9900'">
    <br />
    </font><font size="2" face="Verdana,Arial,Helvetica,Sans Serif">
    <input type="button" name="colr" value="WIT" onclick="document.bgColor='#FFFFFF'">
    <br />
    </font><font size="2" face="Verdana,Arial,Helvetica,Sans Serif">
    <input type="button" name="colr" value="ZWART" onclick="document.bgColor='#000000'">
    </font> </p>
    </form>
    Now I want to change the TEXT color and BACKGROUND color. If you click ORANJE (orange), the text has to be black, if you press WIT (white), the text has to be also black, and if you press ZWART (black), the text has to be white. Now I know that the code for changing text color is

    document.gfColor='#FFFFFF' but i don't know how to put that in the script, cause it doesn't work if I just place it behind the document.bgColor=blablabla

    How do I put this in the code??

    Thanks, Ultimate-Tester
    Last edited by djr33; 08-14-2012 at 10:38 AM. Reason: user request

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    Code:
    onclick="document.bgColor='#000000'; document.gfColor='#FFFFFF'"
    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    document.gfColor
    Is nothing unless it has been previously defined. You would be better off working with standard css scripted style property/value pairs.

    Code:
    <span style="cursor:pointer;text-decoration:underline;" 
    onclick="document.body.style.backgroundColor='orange';
    document.body.style.color='black';">Orange</span>
    Demo:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
    color:white;
    background-color:green;
    }
    </style>
    </head>
    <body>
    <span style="cursor:pointer;text-decoration:underline;" 
    onclick="document.body.style.backgroundColor='orange';
    document.body.style.color='black';">Orange</span>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok I try this.. Thanks for the help

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •