JavaScript 按钮仅按一次

Question

如何使用下面的代码，您只能单击该按钮一次，然后它不会执行任何操作。提前致谢!

 <button onClick="yumpizza();"style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>

<script>
    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
    document.getElementById("pizza").innerHTML = ("Strength:" + strength)
}
</script>

Answer 1

只需在第一次触发后将元素的onclick事件设置为null即可:

<button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>

<script>
  var strength = Math.floor(Math.random() * 20 + 1);
  function yumpizza() {
    document.getElementById("pizza").innerHTML = ("Strength:" + strength);
    document.getElementById("pizzaButton").onclick = null;
  }
</script>

关于事件处理，最佳实践是使用 addEventListener 以编程方式设置事件处理程序，而不是使用 onclick HTML 属性。