javascript - javascript document.getelementbyid() 不适用于 html 加载循环
问题描述
我编写了一个函数,通过尝试获取每个 div id 来填充 index.html 中的 6 个 div。我希望在加载页面时发生这种情况。
发生的情况是图像仅填充第 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
.
推荐阅读
- javascript - Moving an image Javascript
- javascript - 如何制作一个循环打印出第一个字母,然后在新行上打印两个,等等 - javascript
- python-3.x - 使用预训练的 gensim Word2vec 嵌入以及 keras 中的数据集
- azure - Azure APIM 定价层和虚拟网络
- c++ - 在这个有效的斐波那契函数中,它不是传递可以存储在数组中的元素数量吗?
- android - Android SQLite - Update table 1 based on changes in table 2
- java - Parsing JSON File using Gson
- ios - 如果输入为空,如何按 ALL 过滤?SwiftUI/核心数据
- powerbi - 如何在 Power BI 嵌入式代码中实现安全性?
- c++ - Qt StyleSheet to programmatically createdQWidget