尝试在单独的div中显示随机javascript图像

我有一个工作

javascript

代码，它在一个

div

中生成多个随机图像。 我尝试了几次在单独的

div

中显示每个随机图像，但没有成功。我“接近”了，但没有成功。 以下是工作代码：

.一三四{
宽度：25%；
显示：内联块；
}
函数displayNow（）{
var images=[“00.png”、“01.png”、“02.png”、“03.png”、“04.png”、“05.png”、“06.png”]；
变量selectedDices=[]
while（选择的长度小于4）{
var index=images[Math.floor（Math.random（）*images.length）]
如果（已选择Dices.indexOf（index）=-1）{
已选择的骰子。推送（索引）
}
}
对于（i=0；i

您已经在使用

createElement（）

构建

img

元素-您可以使用相同的方法创建一个新的

div

，将子

img

添加到其中，然后将其附加到DOM中。试试这个：

函数displayNow（）{
var src=document.getElementById（“图像”）；
var images=[“00.png”、“01.png”、“02.png”、“03.png”、“04.png”、“05.png”、“06.png”]；
变量selectedDices=[]
while（选择的长度小于4）{
var index=images[Math.floor（Math.random（）*images.length）]
如果（已选择Dices.indexOf（index）=-1）{
已选择的骰子。推送（索引）
}
}
对于（i=0；i

.onetwothreefour{
宽度：25%；
显示：内联块；
}

---

解释：while循环运行四次。生成一个随机索引，并将元素从

图像

数组中移除，然后推入

选定的骰子

数组中。这样，就不会浪费迭代，因为每次都会生成一个唯一的图像。我使用了

forEach

循环，它迭代

selectedDices

数组的所有元素

注意：forEach循环中的注释是一种单行方式。但是，有时不喜欢使用

innerHTML

函数displayNow（）{
var images=[“00.png”、“01.png”、“02.png”、“03.png”、“04.png”、“05.png”、“06.png”]；
var selectedDices=[]；
var src=document.getElementById（“图像”）；
while（选择的长度小于4）{
让index=Math.floor（Math.random（）*images.length）；
设img=images.splice（索引，1）[0]；
已选择的骰子。推送（img）
}
已选择Dices.forEach（（el）=>{
设img=新图像（）；
img.src=“imagesfolder/”+el；
img.alt=el；
img.className=“OneToThreeFour”；
让imgCont=document.createElement（“div”）；
imgCont.append（img）；
src.append（imgCont）；
//src.innerHTML+=“”；
});
}

.onetwothreefour{
宽度：25%；
显示：内联块；
}

谢谢。它起作用了。我添加了div.className=“col”；在createElement下面，生成的div具有用于引导的col类。我还将ID添加到div行：div class=“row”ID=“images”。谢谢。我还没有尝试过这个版本。我刚说完答案#1。我需要对您的代码执行类似的操作，并将class=“col”添加到生成的div中。我假设就在这段代码之后：让imgCont=document.createElement（“div”）；是的，类将在

imgCont

元素声明之后添加。那么您的“更高效”代码也可以工作。还有一种感觉稍微好一点的图像弹出作为我的问题的奖励。也谢谢你。我将使用这个答案。