[英]javascript document.getElementById(“device”) doesn't work?
[英]javascript document.getelementbyid() doesn't work with looping on html load
我編碼了一個 function 來填充我的 index.html 中的 6 個 div,方法是嘗試獲取每個 div id。 我希望在加載頁面時發生這種情況。
發生的事情是圖像只填充在第 6 個 div 中,我想要的是將圖像加載到所有 id='flip-card' 的 div 中。
我將 '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>
您每次都附加相同的圖像元素。 將創建元素的代碼也移到循環內,以便創建多個元素,或者使用cloneNode
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.