Making Code Reusable (Help)

programming web dev
1

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>