Question

The code that I have is getting a little long, I think there is a way to simplify it, take a look on it:

var slidernav = document.getElementsByTagName('li');
slidernavinital = 20;
slidernavadd = 30;
slidernav[0].style.top = slidernavinital + slidernavadd*0 + 'px';
slidernav[1].style.top = slidernavinital + slidernavadd*1 + 'px';
slidernav[2].style.top = slidernavinital + slidernavadd*2 + 'px';
slidernav[3].style.top = slidernavinital + slidernavadd*3 + 'px';
slidernav[4].style.top = slidernavinital + slidernavadd*4 + 'px';
slidernav[5].style.top = slidernavinital + slidernavadd*5 + 'px';
slidernav[6].style.top = slidernavinital + slidernavadd*6 + 'px';
slidernav[7].style.top = slidernavinital + slidernavadd*7 + 'px';
slidernav[8].style.top = slidernavinital + slidernavadd*8 + 'px';
slidernav[9].style.top = slidernavinital + slidernavadd*9 + 'px';
slidernav[10].style.top = slidernavinital + slidernavadd*10 + 'px';
slidernav[11].style.top = slidernavinital + slidernavadd*11 + 'px';

Isn’t possible to do Something like this:

document.getElementsByTagName('li')[x].style.top = 20 + 30*x + 'px';

Thanks a lot in advance!

Answer 1

Yes. Wrap it in a for loop.

for(var i = 0; i < sliderNav.length; i++) {
    sliderNav[i].style.top = sliderNavInitial + sliderNavAdd*i + "px";
}

I think you should pick up an Intro to Programming book, though, if you didn’t know about loops (what’s the point of a computer if it doesn’t take care of the repetitive stuff for you?)

EDIT: By the way, the for loop is shorthand for the following while loop construct:

var i = 0;
while(i < sliderNav.length) {
    sliderNav[i].style.top = sliderNavInitial + sliderNavAdd*i + "px";
    i++;
}

It just puts all of the “bookkeeping” on the first line of the loop so you can more easily predict how many times it will loop through. (A while loop just loops until the condition is met, and then stops, so if you forgot to include the i++; part, it will never stop.)