Question

I’m trying to code my own slide show in JavaScript. What I already have is a skeleton which works in Opera, Safari and Chrome:

var slideShow = (function() {
    var latestGames = document.getElementById('latestGames').getElementsByTagName('li');
    var displayedGame = 0;
    return {
        init: function() {
            latestGames[displayedGame].style.display = 'inline';
            setInterval(this.update, 3000);
        },
        update: function(gameToDisplay) {
            console.log("Displayed game: " + displayedGame);
            latestGames[displayedGame].style.display = 'none';
            gameToDisplay = gameToDisplay || (displayedGame === (latestGames.length - 1) ? 0 : ++displayedGame);
            console.log("Game to display: " + gameToDisplay);
            console.log('====================');
            latestGames[gameToDisplay].style.display = 'inline';
            displayedGame = (gameToDisplay == latestGames.length ? 0 : gameToDisplay);
        }
    }
})();

But in Firefox I only get random numbers when I log the gameToDisplay variable. I can’t see where is the error.

Thanks beforehand.

Answer 1

Use the following code:

var self = this; // preserve this to be used inside the callback
setInterval(function() { self.update(); }, 3000)

Usually what you did would work, but some (Gecko-based) browsers pass an argument to the timer callback function.