javascript document.getelementbyid()不能在html加载时使用循环
javascript document.getelementbyid()不能在html加载时使用循环
提问于 2020-10-26 16:13:04
我编写了一个函数，通过尝试获取每个div id来填充我的index.html中的6个div。我希望在页面加载时发生这种情况。
发生的事情是图像只填充第六个div，我想要的是要加载到所有div中的id='flip-card‘的图像。
我将'console.log(i)‘放在for循环中，以检查循环是否正常工作。它正在工作，但不知何故不想用图像填充所有的div，它只填充最后一个。
有人能帮帮我吗?我错过了什么？非常感谢你的帮助
这是我的index.html文件
<div id="container-project-5">
<h1>MEMORY GAME</h1>
<div class="container-flip-row">
<div id="flip-card-1" class="flip-card-spot"></div>
<div id="flip-card-2" class="flip-card-spot"></div>
<div id="flip-card-3" class="flip-card-spot"></div>
</div>
<div class="container-flip-row">
<div id="flip-card-4" class="flip-card-spot"></div>
<div id="flip-card-5" class="flip-card-spot"></div>
<div id="flip-card-6" class="flip-card-spot"></div>
</div>
</div>
<script src="loadimage.js"></script>这是我的js文件
function loadImage() {
let img = document.createElement("img");
img.src = "https://static8.depositphotos.com/1000792/861/v/950/depositphotos_8614495-stock-illustration-fun-zoo-koala.jpg";
img.setAttribute("width", "150px");
img.setAttribute("height", "150px");
//THIS loop SUPPOSE to FILL ALL the <div> with id 'flip-card' BUT SOMEHOW it ONLY FILL the 6th <div> which is <div id='flip-card-6" class='flip-card-spot'>
for (let i = 1; i <= 6; i++) {
document.getElementById("flip-card-" + i).appendChild(img);
//this is console log to check if for-loop is working
console.log(i);
}
}
//LOAD FUNCTION when BROwSER is LOADED
window.addEventListener("load", loadImage);这是我的css
<style>
.flip-card-spot {
display: flex;
margin: 1px;
background-color: green;
width: 150px;
height: 150px;
}
.container-flip-row {
display: flex;
}
</style>回答 1
Stack Overflow用户
发布于 2020-10-26 16:15:09
您每次都会附加相同的图像元素。将创建元素的代码也移动到循环中，这样您就可以创建多个元素，或者使用cloneNode。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64533488
复制相关文章
相似问题
腾讯云开发者
