I am trying to create a rock paper scissors game and I want to display each player hand using images in two separated divs but when the random number be the same it shows only 1 image this is my 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>
this is my 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()
that is because same created element can only be appended once in a document. You can use node.cloneNode(true) to achieve that
player.appendChild(handsArray[random].cloneNode(true));
robot.appendChild(handsArray[random].cloneNode(true));
Let me know if this solve your issue ;)