Question

我正在尝试使用循环使用来自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;

}

Answer 1

只需将for条件从i<6更改为i<5。

你运行循环太多次了，这意味着你在第六次迭代时：

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

您正在寻找ID为"person5"的元素，因此getElementById()返回了null，其中包含错误：

Uncaught TypeError: Cannot read property 'innerHTML' of null

...这阻止了你的脚本完成。

演示：http://jsbin.com/awubeq/1/edit

Answer 2

你正在循环通过比你更多的div。如果将其切换为4，则可以正常工作。

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

or 

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

Answer 3

这是一个有效的解决方案（加上一些提醒）：

<html>
<head>
   <title>Test</title>
   <script>

function pageLoaded()
{
  alert("called pageLoaded");
  var list = "<ul>";
  var myArray = new Array();

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

  }


  list +="</ul>";

  alert(list);


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

}
</script>
</head>

<body onload="pageLoaded()">

<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>

</body>
</html>

Answer 4

如果使用迭代器，则不必担心知道迭代目标的大小。

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/

Answer 5

由于您正在练习，我只是想指出您应该重新考虑标记，因为这不是使用id属性而是class的情况。 id方法虽然很常见，但却不正确，需要的代码多于必要的代码。这是一个更好的标记示例，这使得使用javascript更简单。

http://jsfiddle.net/3gpe8/

无法使用JavaScript for循环使用HTML div填充数组

5 个答案: