Making Code Reusable (Help)

wispas · 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>

Adam · 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.

Sign In

Making Code Reusable (Help)

Recommended Posts

wispas

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information