Trying to populate a ul in html with randomly selected word. JS

Question

Here's my code

    function wordPick() {
        var words = ["Calgary", "Banff", "Airdrie", "Edmonton", "Drumheller"];

        //List of randomly-selected words from above
        var result[];
        for(var i = 0; i<3; i++) {              
            var result[i] = words[Math.floor(Math.random() * words.length)];
        }

        //Trying to populate the ul with words stored in result[]
        var ul = document.getElementById("list");               
        for(var i = 0; i<result.length; i++) {
            o = result[i];
            alert(o);
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(o.title));
            ul.appendChild(li);
        }
    }

Here's my HTML

<button id="btnHello2" onclick="wordPick()">Populate!</button>

<ul id="list">
    <li>Lady Gaga</li>
    <li>Mickey Mouse</li>
    <li>Toronto Pearson International Airport</li>
</ul>

As soon as I hit Populate, the existing ul content should get overwritten by the contents of result[]. But it does not work.

Can anyone help please?

Answer 1

You have never cleared the elements of the <ul> so the list just appends in the <ul> try ul.innerHTML = ""; before the for loop, right after the instantiating of ul variable.

Answer 2

You're not handling your array the right way, do it this way instead :

    var result = [];
    for(var i = 0; i<3; i++) {              
        result[i] = words[Math.floor(Math.random() * words.length)];
    }

There was a syntax error in the way you declared the array

Answer 3

First of all, you are adding items into your array incorrectly. You should use

result.push(words[Math.floor(Math.random() * words.length)]);

instead. Here's an example:

for(i=0;i<3;i++){
    result.push(words[Math.floor(Math.random() * words.length)]);
}

You could also try using .replaceChild() instead of .appendChild() , which can be used like so:

myList.replaceChild(textNodeHere, myList.childNodes[index]);

Answer 4

So there were a few issues and a combination of all of these answers have been put into my working example https://jsfiddle.net/a31hgkco/ .

  var result = []; for(var i = 0; i<3; i++) { result[i] = words[Math.floor(Math.random() * words.length)]; } 

As Sam pointed out the following syntax was incorrect. The result was not defined as an array and you were then redefining the result array when setting the random value.

Also as previously mentioned, the innerHTML of the ul element needs to be cleared to replace the existing content.

Hope that helps

Answer 5

Along with what @Sam Bauwens said, you can remove everything within the <ul> tag by:

var myList = document.getElementById('list');
myList.innerHTML = '';

then change:

li.appendChild(document.createTextNode(o.title));

to:

li.appendChild(document.createTextNode(o));

Here's the jsfiddle .

Answer 6

1 : the second use of 'result' should not have the 'var' declaration in front of it.

2: the object 'o' has no property 'title' - just use 'o'.

Also, if your intention is to replace, not append to the list you should remove the existing 'li' elements as damodar suggested