Home     Articles & Projects     Products & Web Services     Forum

Change DIV class when clicking a div

Hi I have been trying to change the DIV class the original script works fine, but I want the javascript to allow the person to click the div over and over and switch the class.

Here is my code (which does not work)
I am not sure what I am doing wrong, since I see people using if statements in javascript.

<script type="text/javascript">
function changeclass(action) {

var class = document.getElementById("tab"+action);

if ( class.className == switchoff )
{
document.getElementById("tab"+action).className = "switch";
}
else if ( class.className == switchoff )
{
    document.getElementById("tab"+action).className = "switchoff";
}
}

</script>
<div id="tab1" onclick="changeclass(1);" class="switch">
</div>

<div id="tab2" onclick="changeclass(2);" class="switch">
</div>

Hi Russell, You'll need to

Hi Russell,

You'll need to use quotes around the strings within the IF statements....

if ( class.className == "switchoff")
{
  document.getElementById("tab"+action).className = "switch";
}
else if ( class.className == "switchoff" )
{
  document.getElementById("tab"+action).className = "switchoff";
}

Cheers,
David.

Hi David, that worked like a

Hi David, that worked like a charm.

Here is the full code for anyone that wants it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
.switch{width:58px;height:26px;background:url('http://www.admob.com/img/widgets/buttons/onoff.gif') no-repeat -56px 0;
}

.switchoff{
width:58px;height:26px;background:url('http://www.admob.com/img/widgets/buttons/onoff.gif') no-repeat 0 0;}
</style>



<script type="text/javascript">


function changeclass(action) {

class = document.getElementById("tab"+action);

if ( class.className == 'switchoff')
{
  class.className = "switch";
}
else if ( class.className == 'switch' )
{
  class.className = "switchoff";
}

}

</script>
</head>

<body>

<div id="tab1" onclick="changeclass(1);" class="switch">
</div>

<div id="tab2" onclick="changeclass(2);" class="switch">
</div>


</body>
</html>

Thanks

Is there anyway to do a POST

Is there anyway to do a POST in Javascript?
basically I would like to send a 1 or a 0 to a PHP script but not show the user that it has sent.
This is for the script above.

the users clicks on div/s for each category section like Health, IT, Communications, etc...
if switch = on it send 1 and if switchoff = off it sends 0

Hi all, this is the code i

Hi all, this is the code i came up with, but it is not sending the data, the page with the php post.php works.

function changeclass(action) {

class = document.getElementById("tab"+action);

if ( class.className == 'switchoff')
{
  class.className = "switch";
  xmlhttp.open("GET", 'post.php?id='+action+'onoff=1', true);
  xmlhttp.send(null);
}
else if ( class.className == 'switch' )
{
  class.className = "switchoff";
  xmlhttp.open("GET", 'post.php?id='+action+'onoff=0', true);
  xmlhttp.send(null);
}

}

Hello Russell, Is post.php

Hello Russell,

Is post.php always guaranteed to be in the same directory on your webserver as the as the page containing the JavaScript? As you are not using an absolute path to post.php this would need to be the case; otherwise use something like:

   xmlhttp.open("GET", '/post.php?id='+action+'onoff=1', true);

In terms of debugging this, have you verified whether post.php is actually being called at all? I would normally make post.php do something that I can use to verify that it was called; such as writing to an event log which I can then monitor in another window...

Hope this helps!
Cheers,
David.