Estoy haciendo un juego de combinación de caras en el que un lado tiene más que el otro y haces clic en el extra para jugar, pero todas las caras están debajo de una cara en un lado de la pantalla. ¿Me olvidé de colocar el elemento 'cara'? en el navegador dice 'TypeError no capturado: leftSideImages.node is undefined' y '404 not found'
<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>Ya casi llegas, creo que esto es lo que quieres.
Tienes problemas de pareja. El primero es su error JS. Para solucionarlo, modifiqué ligeramente tu código. Primero, divido tu función en dos. generateFacesInDOM se encarga de agregar el dom, mientras que generateFaces dirá dónde y cuánto, en última instancia, confiando en generateFacesInDOM . También moví la llamada de función inicial de la etiqueta del cuerpo a JS, por lo que todo su código JS está en un solo lugar.
Actualicé su número aleatorio para elegir un número aleatorio entre 0 y 100 y luego configuré la parte superior e izquierda como un %. Luego, usando CSS, podemos permitir que se posicionen correctamente.
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>