ウェブページ上のリストに配列の値を追加する機能付きのjavascript配列

私はただジャバスクリプトを学んでいる学生です。私は配列を作成するための単純な割り当てに取り組んでおり、配列値をリストに追加する関数を作成します。ここに私のコードが添付されています。私のjavascript forステートメントでは、 "document.write（places [i] +"
"）;"を追加しましたが、これは値のリストのみを表示します。私のウェブページのulセクションには表示されません。このコード行を修正するのに役立ちますか？ご協力いただければ幸いです。 forループ内のインデックスiでウェブページ上のリストに配列の値を追加する機能付きのjavascript配列

<body> 
<header> 
<h1> 
Hands-on Project 3-3 
</h1> 
</header> 

<article> 
<h2>Scouting Locations</h2> 
<div id="results"> 
<ul> 
<li id="item1"></li> 
<li id="item2"></li> 
<li id="item3"></li> 
<li id="item4"></li> 
<li id="item5"></li> 
</ul> 
</div> 
</article> 
<script> 
//array storing places to display 
var places = ["Atlanta", "Nashville", "Dallas", "Los Angeles", "Miami"]; 

// function to generate list from array 
function processPlaces() { 
    var liElements = document.getElementsByTagName('li'); 
    for (var i = 0; i < 5; i++) { 
     // write each array element in places to its corresponding list item in liElements 
     document.write(places[i] + "<br />"); 
    } 
} 
</script> 
</body> 
</html>

出典

2017-02-11 Teresa

正確に何をしたいですか？ –

@Teresaこれはうまくいった！ – guest271314

セットliElementの.innerHTMLは

for (var i = 0; i < 5; i++) { 
// write each array element in places to its corresponding list item in liElements 
    liElements[i].innerHTML = places[i] + "<br />" 
}

出典

2017-02-11 05:23:29 guest271314

！ありがとうございました！ – Teresa

は、あなたがJavaScriptと配列で行うことができますいくつかのクールなものがあります。

上記のforループは基本的なものですが、ここにいくつかのトリックがあります。

for (var i = 0; i < places.length; i++)

この例では、配列の長さを知る必要はありません。配列はゼロインデックスされているので、配列内の最後の項目（ケースインデックス4）まで0を反復します。

今、あなたのHTMLは、すべてのあなたの<li>のタグを削除し、それが空であることを心配しないでください<ul id="places-list"></ul>

のようなものに開口部<ul>を変更することができ、あなたはそれを記入します。

新しい要素を作成してDOMに追加するコードセットを使用します。

for (var i = 0; i < places.length; i++) { 
    var listItem = document.createElement("li"); //creates new <li> 
    var output = places[i]; //saves value of array at this index 
    listItem.appendChild(output); //appends array value to <li> 
    document.getElementById("places-list").appendChild(listItem); //appends <li> to <ul> 
}

あなたは、その後の関数を呼び出すことを計画していない限りあなたは、関数の中でこのループをラップする必要はありませんようprocessPlaces();

私はあなたが学んでいるうれしいと物事はあなたのようにはるかに容易に入手仕事を続けて下さい。そして、jQueryを学ぶと、これはもっと簡単になります。

をあなたが書かれたようなHTMLを変更しない場合だけ、次のようにコードを変更します：コメントに反応して

EDIT

for (var i = 0; i < places.length; i++) { 
     var listItem = document.getElementById("item" + i); //grabs relevant <li> 
     var output = places[i]; //saves value of array at this index 
     listItem.appendChild(output); //appends array value to <li> as is 
    }

出典

2017-02-11 05:32:01 wlh

ありがとうございます。あなたはこれをうまく説明しましたが、コードを書いたままにしておき、各リストアイテムを配列内の場所に置き換えて出力するようにしています。希望は意味をなさない。 – Teresa

問題ない。私もあなたにそれを見せてあげましょう。 – wlh

あなたは新しい<ul>を作成するために、次のコードを使用することができます要素をHTMLの配列リストに追加します。

<html> 
    <body> 
    <header> 
<h1> 
Hands-on Project 3-3 
</h1> 
    </header> 
    <article> 
    <h2>Scouting Locations</h2> 
    <div id="results"> 
    <div id="renderList"></div> 
    </div> 
</article> 
<script> 
(function(){ 
var ul = document.createElement('ul'); 
ul.setAttribute('id','proList'); 

var t, tt; 
places = ["Atlanta", "Nashville", "Dallas", "Los Angeles", "Miami"]; 

document.getElementById('renderList').appendChild(ul); 
places.forEach(renderplacesList); 

function renderplacesList(element, index, arr) { 
    var li = document.createElement('li'); 
    li.setAttribute('class','item'); 

     ul.appendChild(li); 

    t = document.createTextNode(element); 

    li.innerHTML=li.innerHTML + element; 
    } 
})(); 
</script> 
</body> 
</html>

出典

2017-02-11 05:47:34

ありがとうございます。このバージョンも機能しました。私はちょうど上記のようにliElements [i] .innerHTML = places [i] + "
"を追加しました。 – Teresa

ウェブページ上のリストに配列の値を追加する機能付きのjavascript配列

答えて

関連する問題