# Making Code Reusable (Help)

**URL:** <https://forum.kirupa.com/t/making-code-reusable-help/309270>\
**Category:** web dev\
**Created:** [May 11, 2010, 9:29am UTC](https://forum.kirupa.com/t/making-code-reusable-help/309270 "2010-05-11T09:29:28Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![wispas](https://avatars.discourse-cdn.com/v4/letter/w/9de0a6/32.png) [@wispas](https://forum.kirupa.com/u/wispas)\
**Post date:** [May 11, 2010, 9:29am UTC](https://forum.kirupa.com/t/making-code-reusable-help/309270/1 "2010-05-11T09:29:28Z")

</div>

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!

```auto

<!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>

```
