Question

I’m still in the process of learning JavaScript. and I would like to complete the task using only JavaScript and no Jquery.

I have multiple div/images that I’m trying to manipulate using the z-index, and a button that randomize the images to come to the front.

I got the random image array to work but as you could see in image[1]…setting each changeZ index will be laborious. So I’m embarking on changing the class’s (as seen in image[0] so I could add current to the new image and send current to the background on the next go around and then removing the class attribute. I have got the element to work separate but having trouble putting it together in a array.

function changeZIndex(i,id) { 
    document.getElementById(id).style.zIndex=i;}; 

function changeClassZIndex(i,tagName){
    document.getElementsByTagName("*").style.zIndex=i;};

function getImage(){ 

var whichImage=Math.floor(Math.random()*3); 

var image=new Array() 

var currentPhoto = div.current

image[0]=function() { 
    changeZIndex(5,"scene1"); 
    changeClassZIndex(-5,"current"); 
    currentPhoto.removeClass('current')
    document.getElementById("scene1").className += "current"; };


image[1]=function() { 
    changeZIndex(5,"scene2"); 
    changeZIndex(-5,"scene1");
    changeZIndex(-5,"scene3");
    changeZIndex(-5,"scene");  
}; 

image[2]=function() { 
    changeZIndex(5,"scene3"); 
    changeZIndex(-5,"scene");
    changeZIndex(-5,"scene2"); 
    changeZIndex(-5,"scene1");
}; 

image[whichImage].apply(undefined);}; 

Answer 1

It’s because document.getElementsByTagName() returns an array of elements, which you can’t do operations like that on. Instead, you need to enumerate through them and do the operations individually.

Here’s a working jsfiddle which shows exactly how to do it: jsfiddle

---

As a side note: if there’s one thing a lot of web programming will teach you, its this:

Dont ever, ever, rule out jQuery as an option.

JQuery is your best friend, and the use of it in this situation would cut down your lines of code by well over half.