<div class="wrapper">
<div class="dice-display">
出目:
<span class="dice-diplay-number">サイコロを振ってください</span>
</div>
<button class="dice-roll">サイコロを振る</button>
</div>

body {
  margin: 0;
}
.wrapper{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dice-display{
  text-align: center;
  margin: 10px;
}
.dice-roll {
  display: block;
  margin: 0 auto;
  cursor: pointer;
  padding: 10px;
}

const Dice = document.querySelector(".dice-roll");
const DiceDisplayNum = document.querySelector(".dice-diplay-number");

const DiceNum = Math.floor(Math.random() * 6) + 1;

Dice.addEventListener("click", () => {
  const DiceNum = Math.floor(Math.random() * 6) + 1;
  DiceDisplayNum.innerHTML = DiceNum;
});