时间戳

首页 > 解决方案 > 循环遍历图像数组并设置 div 的 innerHTML 以包含所有图像

javascript - 循环遍历图像数组并设置 div 的 innerHTML 以包含所有图像

问题描述

我正在尝试使用 JS 将我的 div 更新为包含数组中的所有图像。我现在所拥有的将更新一个图像 - 我如何正确循环从数组中添加所有图像？

playersBox = ['images/char-boy.png', 'images/char-cat-girl.png', 'images/char-horn-girl.png', 'images/char-pink-girl.png', 'images/char-princess-girl.png'];

JS

let playerContainer = document.getElementById('players-container');
for (var i = 0; i < playersBox.length; i++) {
    playerContainer.innerHTML = '<img src=\"'+playersBox[i]+'\">';
}

HTML

<div id="players-container">
</div>

CSS

#players-container {
    height: 151px;
    width: 505px;
    background-color: #eee;
    margin: 0 auto;
}

标签： javascriptarraysloops

解决方案

您正在重新定义循环中的 innerHTML，因此您只会获得最后一张图像，因为它被覆盖了......执行以下操作：

let playerContainer = document.getElementById('players-container');
playerContainer.innerHTML = "";
for (var i = 0; i < playersBox.length; i++) {
    playerContainer.innerHTML += '<img src=\"'+playersBox[i]+'\">';
}

请注意，+=这将附加到 HTML 而不是替换。

推荐阅读