ランダムに選択された単語でhtmlにulを入力しようとしています。 JS

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> 

だだ、既存のULの内容は、[]結果の内容で上書きされるはずです。しかし、それは動作しません。

誰でも助けてください。

Answer 1

あなたは<ul>の要素をクリアしたことがないので、リストにはちょうどいいul変数のインスタンス化した後、 forループ前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)]); 
} 

あなたはまた、代わりに.appendChild()の.replaceChild()を使用してみてください可能性があり、そのように使用することができます：

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

サムは、次の構文が間違っていた指摘したように。結果は配列として定義されておらず、ランダム値を設定するときに結果配列を再定義していました。

また前述のように、ul要素のinnerHTMLをクリアして既存のコンテンツを置き換える必要があります。

あなたがで<ul>タグ内のすべてを削除することができ、@Sam Bauwensが言ったことに伴い

Answer 5

を役に立てば幸い：変更後、

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

：

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

へ：

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

こちらはjsfiddleです。

Answer 6

1： '結果'の2番目の使用は、その前に 'var'宣言を持つべきではありません。

2：オブジェクト 'o'には 'title'というプロパティはありません。単に 'o'を使用します。

また、リストに追加しない場合は、damodarが示唆するように既存の「li」要素を削除する必要があります。