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。

您运行循环的次数太多了，这意味着您在第六次迭代时这样做了：

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

你循环的 div 比你拥有的更多。如果你把它切换到4，它就可以工作。

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

or 

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

这是一个可行的解决方案（加上一些警报）：

<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>
于 2013-02-24T02:12:28.603 回答
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 回答
0

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

http://jsfiddle.net/3gpe8/

于 2013-02-24T02:32:07.403 回答