Question

I have a js file with two functions, one in plain javascript and one using jQuery. I want both to work on window load. But if I enable both, only the plain javascript function works. When I disabled the “highliter” function “slideSwitch” works ok. What is the problem? How can I fix this?

function slideSwitch() {        
    var active = $('#slideshow img.active'),
    next;

    if (active.length == 0){
        active = $('#slideshow img:last');
    };

    next = active.next().length ? active.next() : $('#slideshow img:first');

    active.addClass('last-active');

    next.addClass('active')
        .css({opacity:0.0})
        .animate({opacity:1.0}, 1000, function() {            
            active.removeClass('active last-active');
        });
};


function startSlideShow() {
    setInterval("slideSwitch()", 5000);
};


function highliter() {
    var current = document.location.pathname;
    var nav = document.getElementById('pages');
    var a_tags = nav.getElementsByTagName('a');
    for (var i = 0; i <= a_tags.length; i++) {
        if (a_tags[i].getAttribute('href') === current) {
            a_tags[i].parentElement.className = 'highlited';
        }
    }
};


window.onload = function() {
    highliter();
    startSlideShow();
};

Answer 1

Is there a javascript error occurring in highliter()? I see two possible issues:

1. Your for loop is checking <= length instead of < length, meaning you’re exceeding the size of the array.
2. I could see there not being an element on the page with an id of ‘pages’, which would mean nav is null and the subsequent access on nav results in a null reference.