Dice only rolls for one player

Question

I'm trying to code a simple Ludo/dice roll game where the dice rolls when the Roll Dice button is clicked, however the dice only rolls for one player. I think it could be because I'm using the getElementbyId method, however when change it to class and use querySelectorAll instead it results in both of the dice images being static.

// Declare Variables
const images = ['dice1.png', 
                'dice2.png', 
                'dice3.png', 
                'dice4.png', 
                'dice5.png', 
                'dice6.png']    
       
// Randomize
function playerRoll() {
    ranImage = Math.floor(Math.random() * images.length);
    rollDice = images[ranImage];
    document.getElementById('display-image').src = `./images/${rollDice}`
}

.dice{
    cursor: pointer;
}

<body>

    <h1>Ludo Game</h1> 
    <h2>Player 1</h2>
        <div class="dice-image"></div>
        <div class="dice">
        <img id="display-image" src="/images/dice1.png" height="100px" weight="100px">
        </div>

    <h2>Player 2</h2>
        <div class="dice-image"></div>
        <div class="dice">
        <img id="display-image" src="/images/dice4.png" height="100px" weight="100px">
        </div>
    </div>

    <button id="roll-button" onclick="playerRoll()">Roll Dice</button>

    <script src="index.js"></script>
</body>
</html>

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — CBroe, Feb 02 '22 at 11:48
the display-image ID must be unique, getElementById will pick the first match in your case — skmail, Feb 02 '22 at 11:49

score 1 · Accepted Answer · answered Feb 02 '22 at 11:56

The id attribute should contain a unique name. Both img tags have the same id and therefore document.getElementById('display-image') selects the first it finds.

Assuming that you want to roll both dice on the click of the one button you could do the following.

function playerRoll() {
    ranImage = Math.floor(Math.random() * images.length);
    rollDice = images[ranImage];
    document.getElementById('display-image-1').src = `./images/${rollDice}`;
    
    ranImage = Math.floor(Math.random() * images.length);
    rollDice = images[ranImage];
    document.getElementById('display-image-2').src = `./images/${rollDice}`;
}

<body>

    <h1>Ludo Game</h1> 
    <h2>Player 1</h2>
        <div class="dice-image"></div>
        <div class="dice">
        <img id="display-image-1" src="/images/dice1.png" height="100px" weight="100px">
        </div>

    <h2>Player 2</h2>
        <div class="dice-image"></div>
        <div class="dice">
        <img id="display-image-2" src="/images/dice4.png" height="100px" weight="100px">
        </div>
    </div>

    <button id="roll-button" onclick="playerRoll()">Roll Dice</button>

    <script>
        // Declare Variables
        const images = ['dice1.png', 
                        'dice2.png', 
                        'dice3.png', 
                        'dice4.png', 
                        'dice5.png', 
                        'dice6.png']    
            
        // Randomize
        function playerRoll() {
            ranImage = Math.floor(Math.random() * images.length);
            rollDice = images[ranImage];
            document.getElementById('display-image').src = `./images/${rollDice}`
        }
    </script>
</body>

Of course, this is a crude example. With a little time and effort you can write something much better.

score 1 · Answer 2 · answered Feb 02 '22 at 11:57

You need to sort array randomly and instead of id use class with querySelectorAll like:

// Declare Variables
const randomDice = () => Math.random() - 0.5;
const images = ['dice1.png',
  'dice2.png',
  'dice3.png',
  'dice4.png',
  'dice5.png',
  'dice6.png'
]

// Randomize
function playerRoll() {
  const dices = document.querySelectorAll('.display-image');
  const array = [].concat(images).sort(randomDice);
  dices.forEach((dice, i) => {    
    dice.src = `./images/${array[i]}`
  });

}

.dice {
  cursor: pointer;
}

<h1>Ludo Game</h1>
<h2>Player 1</h2>
<div class="dice-image"></div>
<div class="dice">
  <img class="display-image" src="/images/dice1.png" height="100px" weight="100px">
</div>

<h2>Player 2</h2>
<div class="dice-image"></div>
<div class="dice">
  <img class="display-image" src="/images/dice4.png" height="100px" weight="100px">
</div>
<button id="roll-button" onclick="playerRoll()">Roll Dice</button>

Dice only rolls for one player

2 Answers2