JavaScript DOM references not holding up

Question

For some reason ss.transition() does not affect the appropriate DOM elements after ss.goTo() is triggered by an onclick. The ss.transition() call under //Init does work as expected. I assume this is a scope problem. Little help?

var ss = {};

ss.goTo = function(i) {
    ss.old = ss.current;
    ss.current = ss.slides[i];
    ss.transition();
}

ss.transition = function() {
    ss.old.style.display = "none";
    ss.current.style.display = "block";
}

// Hooks

ss.div = document.getElementById("slides");
ss.as = ss.div.getElementsByTagName("a");

// References

ss.slides = [];
for (i in ss.as) {
    if (ss.as[i].rel == "slide") {
        ss.slides.push(ss.as[i]);
    }
}
ss.first = ss.slides[0];
ss.last = ss.slides[ss.slides.length-1];

// Init

ss.current = ss.first;
ss.old = ss.last;
ss.transition();

Answer 1

for (i in ss.as) {

You shouldn't use the for...in loop over an Array or, in this case, NodeList. You'll get member properties you don't want, like item and length. You also can't rely on the items being returned in any particular order; it is very likely that at least ss.last will not be what you expect. If it's a non-item property, ss.old.style.display will definitely fail with an exception, breaking the script.

The correct loop for a sequence is the old-school C construct:

for (var i= 0; i<ss.as.length; i++)

Also, where are you binding the calls to goTo? If you are doing it in a loop with a function inside you, you may well also have the classic loop closure problem. See eg. this question.

Answer 2

The reason for the failure is because you lose the reference to the currently hidden element before you make it show up again. You need to assign old to display:block, then do the switch of old = current, current = variable, then hide old.