Question

这是我的代码

    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);
        }
    }

这是我的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>

只要我点击Populate，现有的ul内容就会被result []的内容覆盖。但它不起作用。

有人可以帮忙吗？

Answer 1

您从未清除<ul>的元素，因此列表只是在 for 循环之后<ul>尝试ul.innerHTML = "";中附加，在实例化之后ul变量。

Answer 2

你没有以正确的方式处理你的阵列，而是这样做：

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

声明数组

的方式存在语法错误

Answer 3

首先，您正在错误地将项添加到数组中。你应该使用

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

代替。这是一个例子：

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

您也可以尝试使用.replaceChild()代替.appendChild()，可以这样使用：

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

Answer 4

所以有一些问题，并且所有这些答案的组合都已放入我的工作示例中https://jsfiddle.net/a31hgkco/。

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

Sam指出以下语法不正确。结果未定义为数组，然后在设置随机值时重新定义结果数组。

同样如前所述，需要清除ul元素的innerHTML以替换现有内容。

希望有所帮助

Answer 5

除了@Sam Bauwens所说的内容，您可以删除<ul>标记内的所有内容：

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

然后改变：

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

为：

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

这里是jsfiddle。

Answer 6

1：第二次使用'result'不应该在它前面加上'var'声明。

2：对象'o'没有属性'title' - 只需使用'o'。

此外，如果你打算更换，不附加到列表，你应该删除现有的'li'元素，如damodar建议的那样

尝试使用随机选择的单词填充html中的ul。 JS

6 个答案: