迭代2d數組並列出所有條目

我有一個遍歷2d數組的函數，每個數組都有一首歌曲和一個解釋器，並且該函數應該運行一個循環並列出每個歌曲的解釋器。問題是，它僅列出最後一首歌曲和解釋，我缺少什麼所以它列出了所有他們?:的迭代2d數組並列出所有條目

HTML：

<ul id="2d"> </ul>

var twoDArray = [ 
    ["I did it my way", "Frank Sinatra"], 
    ["Respect", "Areta Franklin"], 
    ["Imagine", "John Lennon"] 
]; 

function iterative(songs) { 
    for (var i = 0; i < songs.length; i += 1) { 
    document.getElementById("2d").innerHTML = "<li>" + songs[i][0] + " by " + songs[i][1] + "</li>"; 
} 
} 

iterative(twoDArray);

來源

2016-11-03 Sergi

'+ ='代替'='。 – Marvin

那是因爲你每次循環都要設置innerHtml，所以每次除了最後都會覆蓋自己。你想這樣做

document.getElementById("2d").innerHTML += "<li>" + songs[i][0] + " by " + songs[i][1] + "</li>";

來源

2016-11-03 20:43:12 gh9

當然...感謝您指出。接受，當它允許我。 – Sergi

@sergi如果這解決了你的問題，你會標記爲你的答案請 – gh9

對不起，看起來我忘了這麼做。 – Sergi

這是一種方法。希望這可以幫助。

const twoDArray = [ 
 
    ["I did it my way", "Frank Sinatra"], 
 
    ["Respect", "Areta Franklin"], 
 
    ["Imagine", "John Lennon"] 
 
]; 
 
const ul = document.querySelector('ul'); 
 
twoDArray.forEach(pair => { 
 
    const li = `<li>${pair[0]} by ${pair[1]}</li>`; 
 
    ul.insertAdjacentHTML('beforeend', li); 
 
})

HTML: 
 

 
<ul id="2d"> </ul>

來源

2016-11-03 20:47:51 CarlosA

迭代2d數組並列出所有條目

回答

相關問題