出于某种原因,当我单击按钮时,什么也没发生。尽管它应该在 plater1Dice 元素中插入一个随机数。但是当我重新加载页面时,它会完成按钮的工作并插入一个新号码!
HTML:
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<h1 id="message">Player 1 Turn</h1>
<div class="players">
<div id="player1">
<h1>Score:
<span id="player1Scoreboard">0</span>
</h1>
<div id="player1Dice" class="dice active">-</div>
</div>
<div id="player2">
<h1>Score:
<span id="player2Scoreboard">0</span>
</h1>
<div id="player2Dice" class="dice">-</div>
</div>
</div>
<button id="rollBtn">Roll Dice </button>
<button id="resetBtn">Reset Game </button>
</div>
<script src="test.js"></script>
</body>
</html>
JS
let player1Dice = document.getElementById("player1Dice");
let rollBtn = document.getElementById("rollBtn")
function randomNum() {
const num = Math.floor(Math.random()*6)+1
player1Dice.textContent = num
}
rollBtn.addEventListener("click",randomNum())
编辑:我自己找到了解决方案并将其写下来
对于以后遇到此类问题的任何人,我找到了解决方案!您需要
()
从 addeventlistener 函数中删除 !而不是("click", randomNum())
,它应该是("click", randomNum)
。