Estoy tratando de crear un juego de piedra, papel o tijera y quiero mostrar la mano de cada jugador usando imágenes en dos divisiones separadas, pero cuando el número aleatorio es el mismo, muestra solo 1 imagen, este es mi html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Game!!</title> <link rel="stylesheet" href="style/style.css"> </head> <body> <div id="container"> <button id="start-btn">enter-name</button> <div id="players"> <div id="player"></div> <div id="robot"></div> </div> </div> <script src="javascript/app.js"></script> </body> </html>este es mi javascript
const startBtn = document.getElementById('start-btn'); const players = document.getElementById('players'); const player = document.getElementById('player'); const robot = document.getElementById('robot'); /* * hands */ const rockCard = document.createElement('img'); const paperCard = document.createElement('img'); const scissorCard = document.createElement('img'); rockCard.src = "img/rocks.png"; paperCard.src = "img/paper-boat.png"; scissorCard.src = "img/scissors.png"; rockCard.style.width = "100px" scissorCard.style.width = "100px" paperCard.style.width = "100px" let handsArray = [rockCard, paperCard, scissorCard]; /* * function to create random number */ function playerHand(){ random = Math.floor(Math.random() * 3); player.appendChild(handsArray[random]); } function robotHand(){ random = Math.floor(Math.random() * 3); robot.appendChild(handsArray[random]); } playerHand() robotHand()eso se debe a que el mismo elemento creado solo se puede agregar una vez en un documento. Puedes usar node.cloneNode(true) para lograr eso
player.appendChild(handsArray[random].cloneNode(true)); robot.appendChild(handsArray[random].cloneNode(true));Déjame saber si esto resuelve tu problema;)