Javascript 为什么我的图像位置不是随机的，即使随机函数工作正常？

我正在尝试制作一个匹配的游戏，其中图像的左侧和右侧是随机定位的。即使在使用了正常工作的随机函数（使用console.log进行检查）之后，我的图像仍以一行的形式出现（不是随机出现）

我的javascript、css和html代码片段写在下面

var numberOfFaces=5；
var theLeftSide=document.getElementById（“leftSide”）；
var imgHeight=80；
var imgWidth=80；
函数生成器（）{
while（numberOfFaces>0）{
var smileImg=document.createElement（“img”）；
smileImg.src=”http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png”；
smileImg.style.height=imgHeight+“px”；
smileImg.style.width=imgWidth+“px”；
var randomTop=Math.random（）*400；
randomTop=数学楼层（randomTop）；
控制台日志（顶部）；
var randomLeft=Math.random（）*500；
randomLeft=数学楼层（randomLeft）；
控制台日志（左）；
smileImg.style.top=randomTop+“px”；
smileImg.style.left=randomLeft+“px”；
左侧。追加子项（smileImg）；
多少张脸——；
}
}

正文{
利润率：50像素；
}
p{
文本对齐：居中；
字号：18px；
}
#外{
边框：0.5px纯黑；
职位：房地产；
高度：500px；
利润率：20px；
}
#右侧，#左侧{
宽度：500px；
高度：500px；
位置：绝对位置；
}
#右侧{
左：700px；
左边框：2倍纯黑；
}

配对游戏
点击左侧额外的笑脸

因为默认情况下，

img

元素是

内联的

，因此它们的

左侧

、

顶部

、

右侧

和

底部

被忽略

如果要定位图元，请使用其他显示模式之一，例如

position:absolute

，将图元相对于其偏移容器进行绝对定位。（在您的情况下，偏移容器是

#leftSide

），可能有以下规则：

#leftSide img {
    position: absolute;
}

例如：

var numberOfFaces=5；
var theLeftSide=document.getElementById（“leftSide”）；
var imgHeight=80；
var imgWidth=80；
函数生成器（）{
while（numberOfFaces>0）{
var smileImg=document.createElement（“img”）；
smileImg.src=”http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png”；
smileImg.style.height=imgHeight+“px”；
smileImg.style.width=imgWidth+“px”；
var randomTop=Math.random（）*400；
randomTop=数学楼层（randomTop）；
控制台日志（顶部）；
var randomLeft=Math.random（）*500；
randomLeft=数学楼层（randomLeft）；
控制台日志（左）；
smileImg.style.top=randomTop+“px”；
smileImg.style.left=randomLeft+“px”；
左侧。追加子项（smileImg）；
多少张脸——；
}
}

正文{
利润率：50像素；
}
p{
文本对齐：居中；
字号：18px；
}
#外{
边框：0.5px纯黑；
职位：房地产；
高度：500px；
利润率：20px；
}
#右侧，#左侧{
宽度：500px；
高度：500px；
位置：绝对位置；
}
#右侧{
左：700px；
左边框：2倍纯黑；
}
#左侧img{
位置：绝对位置；
}

配对游戏
点击左侧额外的笑脸

非主题：检查您的文档中的

左侧

和

左侧

JS@Thomas：接得好。Isha，如果您想知道为什么这不是一个错误，那是因为浏览器为具有ID的元素创建自动全局变量，其中变量名是ID，其值是对元素的引用（就像您从

getElementById

获得的变量）。不过，有很好的理由不依赖于此。但这就是为什么上面没有失败。@Thomas:谢谢你指出我愚蠢的错误。@t.J.Crowder谢谢…现在知道答案了