Simple problem involving colours

Wurlitzer

04-27-2006, 09:35 PM

Hi! first post here, so bear with me please ;)
Here is a clickable box which changes color and sends a hidden value upon submit.
My problem is that I need to change the background-colors "green" and "red" to hex values like #f30 and #cf0, but it messes up the behavior of the box. I seem to have run out of ideas!

Any help would be much appreciated.

Here's the code :

<html>
<head>
<title>testing</title>
<script type="text/javascript">
function toggleColor(obj,chkID,val)
{
var chk = document.getElementById(chkID);

if (obj.style.backgroundColor == "red")
{
obj.style.backgroundColor = "green";
chk.value = "";
}
else
{
obj.style.backgroundColor = "red";
chk.value = "RED";
}
}
</script>
</head>
<body>

<div style="background-color:green; width: 50px; height: 50px;" onclick="toggleColor(this,'hdnCheckValue1')"></div>

<form method="post" action="<?php echo $PHP_SELF;?>">
<input type="hidden" id="hdnCheckValue1" name="hdnCheckValue1" value="GREEN"/>
<input type="submit" name="submit" value="OK" />
</form>

<? echo $_POST['hdnCheckValue1']; ?>

</body>
</html>

Beagle

04-27-2006, 09:52 PM

<head>
<title>testing</title>
<script type="text/javascript">
function toggleColor(obj,chkID,val)
{
var chk = document.getElementById(chkID);

if (obj.style.backgroundColor == "#ff0000")
{
obj.style.backgroundColor = "#00ff00";
chk.value = "";
}
else
{
obj.style.backgroundColor = "#ff0000";
chk.value = "RED";
}
}
</script>
</head>

vwphillips

04-27-2006, 10:04 PM

excuse me butting in but IE returns HEX most others RBG

to best to have a toggle property rather than the color value

<head>
<title>testing</title>
<script type="text/javascript">
function toggleColor(obj,chkID,val)
{
var chk = document.getElementById(chkID);

if (!obj.set)
{
obj.style.backgroundColor = "#00ff00";
chk.value = "";
obj.set=true;
}
else
{
obj.style.backgroundColor = "#ff0000";
chk.value = "RED";
obj.set=false;
}
}
</script>
</head>

Beagle

04-27-2006, 10:28 PM

oh interesting, the value gets translated when it's applied. I had no idea.

Well, there you go!

Wurlitzer

04-28-2006, 12:03 AM

Thank you!
I'm still having some trouble though.
- Here is the original script in action: test 1 (http://subwerk.net/testing/06/test1.php)
- And here it is with your suggestions: test 2 (http://subwerk.net/testing/06/test2.php)
It seems that it still doesn't want to behave ;)
Do you have other suggestions?

vwphillips

04-28-2006, 07:52 AM

tis because of the submit refreshes the page

<html>
<head>
<title>testing</title>
<script type="text/javascript">
function toggleColor(obj,chkID,val)
{
var chk = document.getElementById(chkID);

if (!obj.set)
{
obj.style.backgroundColor = "#00ff00"; //green
chk.value = "";
obj.set=true;
}
else
{
obj.style.backgroundColor = "#ff0000"; //red
chk.value = "RED";
obj.set=false;
}
}
</script>
</head>
<body>

<div style="background-color:#ff0000; width: 50px; height: 50px;" onclick="toggleColor(this,'hdnCheckValue1')"></div>

<form method="post" action="/testing/06/test2.php">
<input type="hidden" id="hdnCheckValue1" name="hdnCheckValue1" value="GREEN"/>
<input type="submit" name="submit" value="OK" />
</form>

GREEN
</body>
</html>

Wurlitzer

04-28-2006, 01:16 PM

Cheers!

OK I figured it out that way: colours are called via CSS

<style type="text/css">
.red {background-color:#ff0000;}
.green {background-color:#00ff00;}
</style>

<script type="text/javascript">
function toggleColor(obj,chkID,val)
{
var chk = document.getElementById(chkID);

if (obj.className == "red")
{
obj.className = "green";
chk.value = "";
obj.set=true;
}
else
{
obj.className = "red";
chk.value = "RED";
obj.set=false;
}
}