Canvi de visibilitat de les capes

En carregar-se el document, apareix una pila de tres rectangles, en la qual el blau ocupa el nivell superior, el verd el mitjà i el vermell l'inferior.

Cada vegada que fem clic en el botó, els nivells canviaran, donant pas a les sis combinacions possibles; acabades aquestes, el procés torna a començar.

La funció canvi(), que s'executa inicialment gràcies a un onLoad i després cada vegada que fem clic en el botó, canvia els nivells de les capes.

Cal observar que on les capes no tenen contingut no es produeixen opacitats; en aquest sentit el recurs a zIndex és menys potent que el recurs a visibility.

Aquest document té un programa de JavaScript exterior, el contingut del qual és el següent:

num=0;
function canvi(){
   num=num+1;
   if(num>6){
      num=1;
   }
   if(num==1){
      documnt.getElementById("d21").style.zIndex="2";
      documnt.getElementById("d22").style.zIndex="3";
      documnt.getElementById("d23").style.zIndex="4";
   }
   if(num==2){
      documnt.getElementById("d22").style.zIndex="4";
      documnt.getElementById("d23").style.zIndex="3";
   }
   if(num==3){
      documnt.getElementById("d21").style.zIndex="4";
      documnt.getElementById("d22").style.zIndex="2";
   }
   if(num==4){
      documnt.getElementById("d21").style.zIndex="3";
      documnt.getElementById("d23").style.zIndex="4";
   }
   if(num==5){
      documnt.getElementById("d22").style.zIndex="4";
      documnt.getElementById("d23").style.zIndex="2";
   }
   if(num==6){
      documnt.getElementById("d21").style.zIndex="4";
      documnt.getElementById("d22").style.zIndex="3";
   }
}