Get random element from array, display it, and loop - but never followed by the same element

Question

I wrote a simple enough randomize function that loops through the elements in an array and displays them one after the other.

See it here.

function chang         


        

Answer 1

var whatAmI = ["Webdesigner", "Drummer", "Techie", "Linguistics student", "Photographer", "Geek", "Coder", "Belgian", "Batman", "Musician", "StackExchanger", "AI student"];

var prev = 1; //1 because "drummer" is the first array element displayed in the HTML

function getIndex(){
    var next = Math.floor(Math.random() * whatAmI.length);
    if(next==prev)
        return getIndex();
    else {
        prev = next;
        return next;
    }       
}

function changeSubTitle() {
    setTimeout(function () {
        $(".page-header > h2").animate({
            "opacity": 0
        }, 700, function () {
            $(this).text(whatAmI[getIndex()]);
            $(this).animate({
                "opacity": 1
            }, 700, changeSubTitle);
        });
    }, 1000);
}
changeSubTitle();

Try this method.