2

ループを使用して、5 つの異なる div 要素から HTML を配列の内容に取り込もうとしています。for ループを正しく動作させることができません。何か案は？

HTML:

<div id="person0">John</div>
<div id="person1">Kathleen</div>
<div id="person2">Cynthia</div>
<div id="person3">Eric</div>
<div id="person4">Jay</div>



<div style="width: 600px; margin: auto; padding: 15px; border: 1px solid gray; font-family: sans-serif;">
        <h1>The People</h1>
        <div id="result"></div>
</div>

Javascript:

function pageLoaded(){

  var list = "<ul>";
  var myArray = new Array();

  for(i=0; i<6; i++){
    var person = "person";
    var personNumber = "" + i.toString();
    var divId = person.concat(personNumber);
    myArray[i] = document.getElementById(divId).innerHTML;
    list +="<li>"+myArray[i]+"</li>";
  }


  list +="</ul>";

  document.getElementById("result").innerHTML=list;

}
4

5 に答える 5

3

for条件を からi<6に変更するだけi<5です。

ループを何度も実行していました。つまり、実行した 6 回目の反復で次のことを意味していました。

myArray[i] = document.getElementById(divId).innerHTML;

ID が の要素を探していたため"person5"、エラーがgetElementById()返されました:null

Uncaught TypeError: Cannot read property 'innerHTML' of null

...これにより、スクリプトが完了しなくなりました。

デモ: http://jsbin.com/awubeq/1/edit

于 2013-02-24T02:04:07.333 に答える
1

イテレータを使用する場合は、反復のターゲットのサイズを知る必要はありません。

document.getElementById('result').innerHTML =
Array.prototype.reduce.call(document.querySelectorAll('[id^=person]'),
    function (prev, elem) {
       return prev + '<li>' + elem.innerHTML + '</li>';
}, '<ul>') + '</ul>';

http://jsfiddle.net/ExplosionPIlls/Avfjs/1/

于 2013-02-24T02:12:42.577 に答える
1

あなたが持っているよりも多くのdivをループしています。4に切り替えると動作します。

for(i=0; i<5; i++){

or 

for(i=0; i<=4; i++){
于 2013-02-24T02:08:50.417 に答える