Getting loop to work in my script
<p>I basically want this loop to produce random spaces in a grid I am developing, but cannot get it to work in my script.</p>

<p>I have the correct loop I just can't get it to work with the rest of my script</p>

<p>I have just edited and it still doesn't work, any other ideas? </p>

<pre><code>   var listOfWords = {};

var ul = document.getElementById("wordlist");

var i;
for(i = 0; i &lt; ul.children.length; ++i){
   listOfWords[ul.children[i].getAttribute("data-word")] = {
         "pic" : ul.children[i].getAttribute("data-pic"),
         "audio" : ul.children[i].getAttribute("data-audio")
   };
} 

console.log(listOfWords);

var chosenWords = new Array();

      for(var x = 0; x &lt; 6; x++)
    {
        var rand = Math.floor(Math.random() * (listOfWords.length+1));
        chosenWords.push(listOfWords[rand]);
         if (chosenWords.length &lt; 12){
                    chosenWords.push('  ');   
          }

    }

var shuffledWords = Object.keys(listOfWords).slice(0).sort(function() {
    return 0.5 - Math.random();
}).slice(0, 6);
var guesses = {};
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
 var wordsPerRow = 2;

for (var i = 0; i &lt; Object.keys(shuffledWords).length - 1; i += wordsPerRow) {
    var row = document.createElement('tr');

    for (var j = i; j &lt; i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        guesses[word] = [];

        for (var k = 0; k &lt; word.length; ++k) {
            var cell = document.createElement('td');


            $(cell).addClass('drop').attr('data-word', word);
            cell.textContent = word[k];

            row.appendChild(cell);
           }
    }
    tbl.appendChild(row);
}

document.body.appendChild(tbl);
</code></pre>

<p>Thanks</p>
