Results 1 to 8 of 8

Thread: How do I swap Background colors...

  1. #1
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How do I swap Background colors...

    In Javascript.

    I get prompted for which color I wish to use; I then type in the color.

    I hit the button, I get red; I hit the button again, I get blue; I then hit the button a third time, and get red again.

    And so forth:

    Who can provide me the coding for this?

  2. #2
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BadolzoN View Post
    In Javascript.

    I get prompted for which color I wish to use; I then type in the color.

    I hit the button, I get red; I hit the button again, I get blue; I then hit the button a third time, and get red again.

    And so forth:

    Who can provide me the coding for this?
    PLEASE HELP!!

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    1) patience is a virtue
    2) if you would like the user to type in a color you would need to create an array with each of the possible colors, and since there are over 32,000 unique colors this wouldn't be very efficient, instead I would suggest that you make up a few different colors and allow them to choose which one.
    document.
    HTML Code:
    <script type="text/javascript">
    function changeColor(var color = '')
    {
         if(!isNull(color) && color !='')
         {
              document.style.bgColor="#"+color;
         }
         else
         {
              alert("Please Choose A Color");
              document.choose.focus();
         }
    }
    </script>
    <form name="choose" onsubmit="changeColor(this.color.value)">
         <select name="color">
              <option value="ff0000">Red</option>
              <option value="00ff00">Green</option>
              <option value="0000ff">Blue</option>
         </select>
         <input type="submit" name="submit" value="Change Background">
    </form>
    ps that wasnt tested and may need some additional modifications, but there is a general idea of what you need to do

  4. #4
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by boogyman View Post
    1) patience is a virtue
    2) if you would like the user to type in a color you would need to create an array with each of the possible colors, and since there are over 32,000 unique colors this wouldn't be very efficient, instead I would suggest that you make up a few different colors and allow them to choose which one.
    document.
    HTML Code:
    <script type="text/javascript">
    function changeColor(var color = '')
    {
         if(!isNull(color) && color !='')
         {
              document.style.bgColor="#"+color;
         }
         else
         {
              alert("Please Choose A Color");
              document.choose.focus();
         }
    }
    </script>
    <form name="choose" onsubmit="changeColor(this.color.value)">
         <select name="color">
              <option value="ff0000">Red</option>
              <option value="00ff00">Green</option>
              <option value="0000ff">Blue</option>
         </select>
         <input type="submit" name="submit" value="Change Background">
    </form>
    ps that wasnt tested and may need some additional modifications, but there is a general idea of what you need to do
    No no.

    I need to hit a button ONCE, swap a color, hit it AGAIN, get the color back...

    With just one button on the page.

  5. #5
    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:
    <input type="button"
    onclick="document.body.style.backgroundColor=(window.colorswap=!window.colorswap)? 'red' : 'blue';"
    value="Swap">
    Last edited by jscheuer1; 10-17-2007 at 03:34 PM.
    - John
    ________________________

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

  6. #6
    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

    This might be better:

    Code:
    <form action="#" onsubmit="return false;">
    <div>Type in Color: <input name="color" type="text" onchange="window.colorswap=0;"> 
    <input type="button"
    onclick="document.body.style.backgroundColor=(window.colorswap=!window.colorswap)? this.form.color.value : 'blue';"
    value="Swap">
    </div>
    </form>
    Last edited by jscheuer1; 10-17-2007 at 08:25 PM. Reason: typo
    - John
    ________________________

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

  7. #7
    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

    Here is yet another way:

    Code:
    <form action="javascript:void(0);"
    onsubmit="this.go.onclick.apply(this.go);return false;">
    <div>Type in Color: <input name="color" type="text"
    onchange="window.colorswap=0; window.color_saved =
    document.body.style.backgroundColor? document.body.style.backgroundColor : 'white';"> 
    <input name="go" type="button"
    onclick="document.body.style.backgroundColor =
    (window.colorswap=!window.colorswap)? this.form.color.value :
    window.color_saved? window.color_saved : 'white';"
    value="Swap">
    </div>
    </form>
    In this example I have used white as the default, change both instances to blue, if you prefer blue as the default. Once you start changing colors with this version, it only remembers the color that you had when you clicked.
    Last edited by jscheuer1; 10-17-2007 at 08:28 PM. Reason: upgrade code
    - John
    ________________________

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

  8. #8
    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

    I really got carried away with this version:

    Code:
    <form action="javascript:void(0);"
    onsubmit="this.go.onclick.apply(this.go);return false;">
    <div>Type in Color: <input type="text"
    onchange="window.colorswap=0; window.color_saved =
    document.body.style.backgroundColor? document.body.style.backgroundColor : 'white';"> 
    <input name="go" type="button"
    onclick="this.form.current.value = document.body.style.backgroundColor =
    (window.colorswap=!window.colorswap)? this.form[0].value :
    window.color_saved? window.color_saved : 'white';
    if(window.colorswap&amp;&amp;document.body.style.backgroundColor!=this.form[0].value){
    var got=0;
    if(!window.color_table)
    window.color_table=[];
    for (var i = 0; i < window.color_table.length; i++)
    if(window.color_table[i][0]==document.body.style.backgroundColor)
    got=1;
    if(!got)
    window.color_table[window.color_table.length] =
    [document.body.style.backgroundColor, this.form[0].value];
    }
    if(window.color_table&amp;&amp;/^#|(rgb)/.test(this.form.current.value.replace(/ /g,'')))
    for (var i = 0; i < window.color_table.length; i++)
    if(window.color_table[i][0]==document.body.style.backgroundColor)
    this.form.current.value=window.color_table[i][1];"
    value="Swap"><br>
    Current Color: <input type="text" name="current" readonly value="white">
    </div>
    </form>
    - John
    ________________________

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

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
  •