我正在制作一个人脸匹配游戏，其中一边比另一边有更多的面孔，你点击额外的面孔来玩，但面孔都在屏幕一侧的一张面孔下面。我是不是漏掉了"face"元素?在浏览器上它说'Uncaught TypeError: leftSideImages。节点未定义'和'404未找到'
<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>
<script>
let numberOfFaces = 5;
const theLeftSide = document.getElementById("leftSide");
const theRightSide = document.getElementById("rightSide");
function generateFaces(){
for(let i = 0; i < numberOfFaces; i++){
const face = document.createElement('img');
face.src = 'image/smile.png';
let randomTop = Math.floor(Math.random( 1 * 400)+1);
let randomLeft = Math.floor(Math.random( 1 * 400)+ 1);
face.style.top = randomTop;
face.style.left = randomLeft;
theLeftSide.appendChild(face);
}
const leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.node.removeChild(theLeftSide.theRightSide);
leftSideImages.appendChild(theLeftSide.theRightSide(true));
}
</script>
差不多了，我想这就是你想要的。
你有几个问题。第一个是JS错误。为了修复它，我稍微修改了你的代码。首先，我把函数分成两部分。generateFacesInDOM处理添加dom，而generateFaces将告诉在哪里以及添加多少，最终依赖于generateFacesInDOM。我还将初始函数调用从body标签移动到JS，因此所有JS代码都在一个地方。
我更新了你的随机数，在0到100之间选择一个随机数，然后将顶部和左侧设置为%。然后使用CSS，我们可以让他们正确定位。
let numberOfFaces = 5;
var theLeftSide, theRightSide;
window.onload = () => {
theLeftSide = document.getElementById("leftSide");
theRightSide = document.getElementById("rightSide");
generateFaces();
}
function generateFaces() {
generateFacesInDOM(theLeftSide, numberOfFaces + 1);
generateFacesInDOM(theRightSide, numberOfFaces);
}
function generateFacesInDOM(parent, faces) {
for (let i = 0; i < faces; i++) {
const face = document.createElement('img');
face.src = 'image/smile.png';
//random number between 0 and 100
let randomTop = Math.floor(Math.random() * 100);
let randomLeft = Math.floor(Math.random() * 100);
face.style.top = randomTop + '%';
face.style.left = randomLeft + '%';
parent.appendChild(face);
}
}.board {
width: 100%;
height: 200px;
/*Use the grid to make the elements appear side
by side rather than above and below*/
display: grid;
grid-template-columns: 50% 50%;
}
#leftSide,
#rightSide {
position: relative;
}
#leftSide img,
#rightSide img {
position: absolute;
}<h1>matching game</h1>
<p>'Click on the extra smiling face on the left.'</p>
<div class="board">
<div id="leftSide"></div>
<div id="rightSide"></div>
</div>