javascriptで画像srcを変更する

Question

javascript機能で画像を変更しようとしています。私はそれが簡単だと思ったが、それを働かせることはできない。私は自分の誤りを見つけることができない。ここではjavascriptのは、次のとおりです。

function rollDice() { 
rollCount = rollCount + 1; 
dice1 = Math.floor(Math.random() * 6)); 
switch (dice1) { 
    case 0: 
     document.getElementById("dice1").src = "Photos/redpipdice1.png"; 
     break; 
    case 1: 
     document.getElementById("dice1").src = "Photos/redpipdice2.png"; 
     break; 
    case 2: 
     document.getElementById("dice1").src = "Photos/redpipdice3.png"; 
     break; 
    case 3: 
     document.getElementById("dice1").src = "Photos/redpipdice4.png"; 
     break; 
    case 4: 
     document.getElementById("dice1").src = "Photos/redpipdice5.png"; 
     break; 
    case 5: 
     document.getElementById("dice1").src = "Photos/redpipdice6.png"; 
     break; 
} 
} 

これはこれでHTMLにリンクされている：

 <div class = "dice-images inline"> 
     <img id = "dice1" src = "Photos/redpipdice1.png" /> 
     <p>Click dice to hold</p> 
      <div class = "button"> 
       <button id = "roll-dice" type="button" onclick = "rollDice()">ROLL!</button> 
      </div> 

Answer 1

<img id="dice1" src="Photos/redpipdice1.png" /> 
<button id="roll-dice" type="button">ROLL!</button> 

---

document.getElementById(`roll-dice`).addEventListener(`click`,() => { 
    document.getElementById(`dice1`).src = `Photos/redpipdice${getRandomInt(1, 6)}.png`; 
    rollCount++; 
}); 

function getRandomInt(min, max) { 
    return min + Math.floor(Math.random() * (max - min + 1)); 
}