Javascript. Mess with indexing when go through the found by getElementsByTagName nodes

Question

Help me please ! The task: using pure js , mix images (divs) and make them clickable: when clicked, it should remove the image if there is some background property set, and get the image back when its clicked and there is no background at all (kinda toggling, but remember: the task was using the pure js knowing nothing about any frameworks). The problem is: there is 16 divs i get by getElementsByTagName (proven by alert :), and i cant click the last div, because when i wrtie in the last for loop z<div_arr.length firebug throws an error: div_arr[z]: undefined. But when it is z < div_arr.length - 1 its okay, but last div isnt clickable.

here`s a piece of a code:

var div_arr=document.getElementById('wrapper').getElementsByTagName('div');     

// sorting the array of images randomly

        document.getElementById('myButton').onclick = function (){
                for(var j=0;j < div_arr.length; j++){
                var randNum = Math.floor(Math.random() * div_arr.length); // число от 0 до 15
                tmp=div_arr[randNum].className;
                div_arr[randNum].className=div_arr[j].className;
                div_arr[j].className=tmp;
            };

// eventhandling:

                for(var z=0; z< div_arr.length-1;z++){
                div_arr[z].onclick=function(){
                if(this.style.background==false)
                              this.style.background='none';
                else
                   this.style.background=div_arr[z].style.background;

            };