使用JavaScript for循环填充HTML div的数组时遇到问题

我试图使用循环来填充5个不同div元素的HTML数组的内容。我无法让for循环正常工作。有任何想法吗？使用JavaScript for循环填充HTML div的数组时遇到问题

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

}

来源

2013-02-24 maiamachine

我知道这不是一个答案，但你有没有看过使用jQuery？它使JavaScript的开发变得更轻松，更优雅。 – 2013-02-24 02:04:10

我绝对想过这个，但我试图在JS功能上做得更好，所以这样做的做法:) – maiamachine 2013-02-24 02:05:34

对练习核心JS有好处，对此有良好祝愿。将HTML和JavaScript一起放到一起，并附上一些警报，让它工作。 – 2013-02-24 02:14:17

只要改变for条件从i<6到i<5。

你正在运行的一分太多次，这意味着在第六次迭代时，你所做的：

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

您正在寻找与"person5" ID的元素，因而getElementById()返回null这给了错误：

Uncaught TypeError: Cannot read property 'innerHTML' of null

...它停止了脚本的完成。

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

来源

2013-02-24 02:04:07 nnnnnn

谢谢！哇 - 这总是一些愚蠢的小错误。我总是忘记数组以索引0开始。这固定了它。 – maiamachine 2013-02-24 02:07:29

我有类似的东西：

当我使用您的代码，并使用“alert”向我显示结果时，div内的结果是文本+“”。我该如何克服这个问题？ – 2016-01-28 08:35:22

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

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

or 

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

来源

2013-02-24 02:08:50

这将跳过最后一项。需要“<= 4”或“<5”。 – nnnnnn 2013-02-24 02:34:27

是的，你是对的 - 我的不好。快速没有检查。 – 2013-02-24 05:39:20

这里是一个有效的解决方案（加上一些警报）：

<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-24 02:12:28

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

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-24 02:12:42

既然你都练，我只是想指出的是，你应该重新考虑的标记，因为这不是一种使用id属性，但对于一个class的情况。尽管很普遍，但id方法不正确，需要的代码比必要的更多。这里有一个更好的标记的例子，这使得使用javascript更直接。

http://jsfiddle.net/3gpe8/

来源

2013-02-24 02:32:07

使用JavaScript for循环填充HTML div的数组时遇到问题

回答

相关问题