Assign a number to an image javascript

2 days ago 7

ARTICLE AD BOX

I have a file assets on my code folder with dice images, I want to give to each dice the value of a number so when both player rolls their dice, the picture of the dice is shown instead

let's say dice1=0; dice2=1 etc until dice6=5

Does someone may have an idea ?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Dicee Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="start">Start your game!</h1> <div class="container"> <div class="first"> <h3>player 1</h3> <img id="1" src="assets/dice1.png" alt="dice"> </div> <div class="second"> <h3 >player 2</h3> <img id="2" src="assets/dice2.png" alt="dice"> </div> </div> </body> </html> // Generate random dice from 0 to 5 function getNewDice() { return Math.floor(Math.random() * 6); } const clickToPlay = document.querySelector("#btn").addEventListener("click", winner); // compare the value of both player's dice function winner() { let player_1 = getNewDice(); let player_2 = getNewDice(); if (player_1 > player_2) { return document.querySelector(".start").textContent = "🚩 Player 1 wins"; } else if (player_1 === player_2) { return document.querySelector(".start").textContent = "🚩 It's a draw 🚩"; } else { return document.querySelector(".start").textContent = "Player 2 wins 🚩"; } }