PDA

View Full Version : How do I swap Background colors...



BadolzoN
10-15-2007, 12:52 PM
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?

BadolzoN
10-15-2007, 03:04 PM
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!!

boogyman
10-15-2007, 03:38 PM
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.


<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

BadolzoN
10-17-2007, 02:53 PM
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.


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

jscheuer1
10-17-2007, 03:19 PM
<input type="button"
onclick="document.body.style.backgroundColor=(window.colorswap=!window.colorswap)? 'red' : 'blue';"
value="Swap">

jscheuer1
10-17-2007, 03:44 PM
This might be better:


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

jscheuer1
10-17-2007, 04:03 PM
Here is yet another way:


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

jscheuer1
10-18-2007, 11:22 AM
I really got carried away with this version:


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