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属性。

Answer 2

在yumpizza（）函数中再添加一行：

document.getElementById("pizzaButton").disabled = true;

Answer 3

你也可以使用jquery：

    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
    document.getElementById("pizza").innerHTML = ("Strength:" + strength)
}
$('button').on('click', function() {
    $(this).disable();
});

这是小提琴示例：http://jsfiddle.net/eugensunic/tnaZV/530/

JavaScript按钮只按一次

3 个答案: