www.webdeveloper.com
Results 1 to 3 of 3

Thread: Toggle div bg

  1. #1
    Join Date
    Mar 2012
    Posts
    2

    Toggle div bg

    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>

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    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

  3. #3
    Join Date
    Mar 2011
    Posts
    1,139
    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!
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles