wispas Posted May 11, 2010 Share Posted May 11, 2010 I have put together this code that will change the background color of my div container... which works very well... but if i had another div that wanted to do the same thing... is there a way i can make this code reusable and not have to copy and paste the entire function. Thanks! <!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"> <!-- #myDiv { background-color: #33CCFF; width: 300px; height: 300px; } --> </style> </head> <body> <script type="text/javascript"> var gothink = 0; function gothink_function(element) { if ( gothink == 0 ) { document.getElementById('myDiv').style.backgroundColor = '#D4DBE7'; gothink = gothink + 1; // alert(gothink) } else if ( gothink == 1 ) { document.getElementById('myDiv').style.backgroundColor = '#D49997'; gothink = gothink - 1; // alert(gothink) } } </script> <div id="myDiv">Content for id "myDiv" Goes Here</div> <p>Click one:</p> <p><img src="images/close_btn.jpg" width="40" height="40" onclick="alert(gothink)" /></p> <p>Click two:</p> <p><img src="images/round_red_close_button_5095.jpg" width="200" height="200" onclick="gothink_function()" /></p> </body> </html> Quote Link to comment Share on other sites More sharing options...
Adam Posted May 11, 2010 Share Posted May 11, 2010 Yes. When you call the function, pass the current element object to it using the "this" keyword: onclick="gothink_function(this);" It looks like your function is already expecting the element as a parameter, so instead of using: document.getElementById('myDiv') To create the element object, you can just use the object you passed to the function: function gothink_function(element) { if ( gothink == 0 ) { element.style.backgroundColor = '#D4DBE7'; gothink = gothink + 1; // alert(gothink) } else if ( gothink == 1 ) { element.style.backgroundColor = '#D49997'; gothink = gothink - 1; // alert(gothink) } } If you want you can also extend this further, to pass the colour you want use; but with the logic you have in place at the moment you'd probably need to pass 2 colours, 1 for gothink=1 and then the other for when gothink=0. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.