Toggle div bg

**phpeter** · 03-16-2012 09:51 AM

Hello,

I have the following question? i have some divs and I want them to change background colors when i click on it. I have been searching on the internet and tried somethings out. now i can change the background color but i can't switch it back to the beginning. This is was I got so far. how can i make it so that it will toggle on each click. so first click, it turns black. second, it will turn white again and so on.

HTML Code:

<html>
<head>
<title>Nieuwe pagina 2</title>

<style type="text/css">
	#test {
    	border: 1px dashed #FF0000; 
   		color: #000000;
    	text-align: center;
    	width: 100px;
    	height: 100px;
    	margin: 0px;
    	padding: 4px;
    	background: #000000;
    }
</style>

<script type="text/javascript">
function turn($div, $kleur)
{
	var div = document.getElementById($div);
    div.style.background = "#ffffff";
}
</script>

 
</head>                              
<body>
<div id="test" onclick="javascript:turn('test', '#ffffff')" ></div>
</body>
</html>

**coothead** · 03-16-2012 11:44 AM

Hi there phpeter,

and a warm welcome to these forums.

Try it like this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Nieuwe pagina 2</title>

<style type="text/css">
#test {
    width:100px;
    height:100px;
    padding:4px;
    border:1px dashed #f00; 
    color:#000;
    text-align:center;
    cursor:pointer;
 }
.black {
    background-color:#000;
 }
.white {
    background-color:#fff;
 }
</style>

<script type="text/javascript">
function init(){
document.getElementById('test').onclick=function() {
   this.className=(this.className=='black')?'white':'black';
  }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>

<div id="test" class="black" title="click to change color">test</div>

</body>
</html>

coothead

**rtrethewey** · 03-16-2012 11:46 AM

Do yourself a favor and take the time to learn some basic programming. While you can often find scripts that will do what you want, you'll always run into trouble with trying to modify the scripts you find. w3schools.com has a pretty decent course online. Give them a try.

In this case, you need to use a variable to keep track of the current color of the background. Then when your onclick() function is called, instead of simply applying the color specified, you can switch back and forth between two colors. Good luck!

Thread: Toggle div bg

Thread Tools

Display

Toggle div bg

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions