在按鈕中顯示javascript數組的內容

我有以下代碼。如何使數組的內容出現在按鈕上？數組的內容爲0,1,2,3,4,5。我想，其垂直對準的按鈕來如下：在按鈕中顯示javascript數組的內容

var family = [0, 1, 2, 3, 4, 5]; 
 
console.log(family); 
 
for (var prop in family) { 
 
    document.getElementById('aaron-family').innerHTML += '<div class=col> <button type="button" class="list-group-item"' + prop + '</button></div>'; 
 
    console.log(prop); 
 
}

button { 
 
    width: 200px; 
 
    height: 200px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <ul id="aaron-family"> 
 
     <div class="list-group"></div> 
 
    </ul> 
 
    <div class="col"> 
 
     1 of 3 
 
    </div> 
 
    <div class="col"> 
 
     j 1 of 3 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-09-26 user3163920

你嘗試過什麼？ – Weedoze

我投票結束這個問題，因爲問題是由'

這現在工作很好。

你的代碼工作正常，你只是忘記關閉標籤追加HTML。

var family = [0, 1, 2, 3, 4, 5]; 
 

 
for (var prop in family) { 
 
    document.getElementById('aaron-family').innerHTML += '<div class=col> <button type="button" class="list-group-item">' + prop + '</button></div>'; 
 
}

button { 
 
    width: 200px; 
 
    height: 200px; 
 
}

<html> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <ul id="aaron-family"> 
 

 
     <div class="list-group"> 
 

 
     </div> 
 
     </ul> 
 
     <div class="col"> 
 
     1 of 3 
 
     </div> 
 
     <div class="col">j 1 of 3 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

我希望這是對您有所幫助。如果還有其他問題，請隨時詢問。

來源

2017-09-26 10:43:19 weBBer

你的循環是不正確以及字符串HTML中，試圖追加，你可以把它改成（我用更好的可讀性字符串模板）：

family.forEach((value) => { 
    document.getElementById('aaron-family').innerHTML += ` 
     <div class="col"> 
      <button type="button" class="list-group-item">${value}</button> 
     </div> 
    `; 
});

來源

2017-09-26 10:49:44

在按鈕中顯示javascript數組的內容

回答

相關問題