SV: [thelist] Javascript: altering BG color of multiple divs with oneclick

Tue Nov 11 11:10:11 CST 2003

>In a nutshell: I have a set of six divs. I'd like to be able to click
on any one div and have its background-color change. It would then stay
changed until another div was clicked on, at which point it would return
to the default color and the new div's color would change, and so on...

>I'd also like to be able to click on a div and have it alter the color
of other divs. For example, clicking on Div 3 would alter its color and
that of Div 1.

I really don't know why you would want to do this, but okay...

I made an example below that (I think) works as you described and I've
also put comments in it to explain

/Marcus

<html>
  <head>
    <style>
      div {
        margin:5px;background-color:blue;height:40px;width:50px;
      }
    </style>

    <script>

      // This is a constructor for a Div object. 
      // It's only used to associate a div and a color to each other
      // Could have used an Object instead but I think it makes the
purpose
      // clearer when using a home-brewn class
      function Div(elt, color) {
        this.div = elt;
        this.color = color;
      }

      // I store all Div objects in this variable between clicks
      var previousDivs = null;

      // Performs all the work. Takes an element and a color as default
but
      // you can pass as many ids (strings) to elements after the color
as you want.
      // The extra elements you pass as string ids will get their
background set
      // as well.
      function changeColor(elt, color) {
        // Change the color back on the elements you shifted on last
click
        // but previousDivs will be null first time...
        if(previousDivs != null) {          
          for(var i = 0 ; i < previousDivs.length ; i++) {
            previousDivs[i].div.style.backgroundColor =
previousDivs[i].color;
          }
        }
        // create a new Array to put your new Divs in
        previousDivs = new Array();
        // create a Div object for elt and pass it the element and its
background color        
        previousDivs[0] = new Div(elt, elt.style.backgroundColor);
        // set new color for elt
        elt.style.backgroundColor = color;
        // loop over all the extra elements you passed in and do the
same as for elt         
        for(var i = 2 ; i < arguments.length ; i++) {
          var currentDiv = document.getElementById(arguments[i]);
          previousDivs[previousDivs.length] = new Div(currentDiv,
currentDiv.style.backgroundColor);
          currentDiv.style.backgroundColor = color;
        }                
      }
    </script>

  </head>
  <body>
  <!-- create all your divs and make them call changeColor on onclick
-->
    <div id="div1" onclick="changeColor(this, 'yellow');"></div>
    <div id="div2" onclick="changeColor(this, 'red');"></div>
    <div id="div3" onclick="changeColor(this, 'orange', 'div1');"></div>
    <div id="div4" onclick="changeColor(this, 'green');"></div>
    <div id="div5" onclick="changeColor(this, 'pink');"></div>
    <div id="div6" onclick="changeColor(this, 'purple', 'div1',
'div3');"></div>

  </body>
</html>