使用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的數組時遇到問題

回答

相關問題