时间戳

首页 > 解决方案 > *已解决*单击按钮后如何执行功能？

javascript - *已解决*单击按钮后如何执行功能？

问题描述

lives每次buttonA单击时，我都试图从变量中减去 1 条生命。但是该removeLives();功能在buttonA单击之前执行。

<html lang="en">
  <body>
    <div id="lives"></div>
    <button id="buttonA" onClick="removeLives()">buttonA</button>

<script>
  var lives = 3;

  document.getElementById("lives").innerHTML="LIVES: " + removeLives();
  document.getElementById("buttonA").onClick = function(){
    removeLives() {
    lives--;
    return lives;
    }
  }
  </script>
 </body>
</html>

标签： javascriptfunctionbuttononclickclick

解决方案

当解释器运行 line.innerHTML="LIVES: " + removeLives();时，removeLives将被调用，导致lives被递减并且新的内容更低。

而是将该行放在点击处理程序中，并最初lives通过 HTML 填充 div。

此外，在 HTML 或.onclickJS 中使用内联处理程序，但不能同时使用两者 - 最好避免内联处理程序，因为它们被普遍认为是不好的做法。要在 JS 中添加处理程序，请确保使用.onclick，而不是.onClick，它区分大小写。

lives一旦达到 0 ，您可能还想停止递减。

var lives = 3;
document.getElementById("buttonA").onclick = function() {
  lives--;
  if (lives < 0) lives = 0;
  document.getElementById("lives").innerHTML = "LIVES: " + lives;
};
<div id="lives">LIVES: 3</div>
<button id="buttonA">buttonA</button>

推荐阅读