Question

I'm trying to shuffle som innerHTML, I've created some divisions were I add content from a list, now I want to shuffle this everytime I load the site. I've come up with this solution, and it shuffles the innerHTML, but It doesn't put it out in new HTML. Any ideas how to tweak it? Later I will create and shuffle a list of hrefs of image pictures. So basically it is going to be an 9-square image randomizer. I would really appriciate some help :)

<script>

var squareNumbers = ['1','2','3','4','5','6','7','8','9']; //need to create a new list to append image hrefs

        for(var i = 0; i<=squareNumbers.length-1; i++){ //creates the chessboard
            var div = document.createElement('div');
            div.setAttribute('id', 'square'+squareNumbers[i]);
            div.innerHTML = squareNumbers[i];
            var checkHTML = document.getElementById('chessBoard').appendChild(div);
        }

        window.onload = function(){
        var squareDivs = document.getElementById('chessBoard').getElementsByTagName('div');
        var array = [];

        for(var i = 0; i < squareDivs.length; i++){ //creates an array of the squares innerHTML
            array.push(squareDivs[i].innerHTML);    
        }

        var i = array.length, j, temp;
        while(--i > 0){ //shuffles the array according to Fisher Yeates algorithm
            j = Math.floor(Math.random() * (i+1));
            temp = array[j];
            array[j] = array[i];
            array[i] = temp;
            var squares = document.getElementById('chessBoard').getElementsByTagName('div').innerHTML = temp;
            console.log(squares);

        }

        }


        </script>
Was it helpful?

Solution

Update

This just updates them.

var squareNumbers = ['1','2','3','4','5','6','7','8','9'], j, temp;

for(var i = 0; i < squareNumbers.length; i++){ //creates the chessboard
    var div = document.createElement('div');
    div.setAttribute('id', 'square' + squareNumbers[i]);
    div.innerHTML = squareNumbers[i];
    document.getElementById('chessBoard').appendChild(div);
}

window.onload = function(){

    for (i = squareNumbers.length - 1; i >= 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = squareNumbers[j];
        squareNumbers[j] = squareNumbers[i];
        squareNumbers[i] = temp;
        document.getElementById('chessBoard').getElementsByTagName('div')[i].innerHTML = temp;
    }
}


Previous

Here, this does that:

window.onload = function(){
    var squareNumbers = ['1','2','3','4','5','6','7','8','9'], j, temp;

    for (i = squareNumbers.length - 1; i >= 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = squareNumbers[j];
        squareNumbers[j] = squareNumbers[i];
        squareNumbers[i] = temp;
        var div = document.createElement('div');
        div.setAttribute('id', 'square'+squareNumbers[i]);
        div.innerHTML = squareNumbers[i];
        document.getElementById('chessBoard').appendChild(div);
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top