无法生成多个图像答案

【问题标题】：Unable to generate multiple Images无法生成多个图像
【发布时间】：2017-01-10 11:39:15
【问题描述】：

这是一个游戏，每次用户点击左侧 div 的最后一个节点时，都会添加 5 个以上的图像。

如果他点击其他节点，应该会显示“游戏结束”警报。

问题：

TypeError：leftside.lastChild 为空
在调用 generateface 函数生成一组新面孔之前，如何删除左右 div 的所有节点。

配对游戏

点击左侧多余的笑脸
```
.smile {position:absolute}
div {position:absolute; width:500px;height: 500px}
#rightside {left:500px;border-left: 1px solid black}
```
var numberOfFaces = 5; var leftside = document.getElementById("leftside"); var rightside = document.getElementById("rightside"); 函数生成面（）{ 对于 (i=0;ievent.stopPropagation(); numberOfFaces += 5; generateFaces(); }; theBody.onclick = function gameOver() { theBody.onclick = null; alert("游戏结束！"); };

【问题讨论】：

您的控制台是否收到任何错误？
可能只有一个 DOM 有多个元素！
@DavidR 你能帮忙吗！

标签： javascript dom

【解决方案1】：

您忘记将px 添加到top 和left style 属性。修改如下代码

ismile.style.top = topran + 'px'; 
ismile.style.left = leftran + 'px';

var numberOfFaces = 5;

var leftside = document.getElementById("leftside");

function generatefaces() {

 for (i=0;i<=numberOfFaces;i++) {

ismile = document.createElement("img");

ismile.src = "http://orig00.deviantart.net/449c/f/2009/061/5/7/smiley_icon_by_emopunk23.jpg";

ismile.className = "smile";

var topran = Math.random() * 400;

topran = Math.floor(topran);

var leftran = Math.random() *400;

leftran = Math.floor(leftran);

ismile.style.top = topran + 'px'; 

ismile.style.left = leftran + 'px';

leftside.appendChild(ismile);

}

}

.smile {position:absolute}
    div {position:absolute; width:500px;height: 500px}
    #rightside {left:500px;border-left: 1px solid black}

<body onload="generatefaces()">
  <h1> Matching Game </h1>
  <p> click on the extra smiling face on the left </p>
  <div id="leftside"></div>
  <div id="rightside"></div>
</body>

【讨论】：

谢谢它的工作。但是，添加 'px' 的逻辑是什么？当我确定了一个范围。

配对游戏