javascript 单击 html 按钮不执行任何操作

Question

这个问题已经有答案了:

What is the scope of variables in JavaScript? (27 个回答)

已关闭 7 年前。

我有一个简单的 bootstrap html 布局设置，其中包含 2 个按钮 #add和#take 。当之前从 $(document).ready 函数调用它们的函数时，一切正常，但由于无论如何我都需要重用这些函数，所以我决定将它们放在外面。

现在，当我单击按钮时，什么也没有发生。有人可以告诉我我做错了什么吗？

codepen

html:

<div clas="container">
  <div class="row">
    <div class="col-xs-12">
      <span>Session length:</span>
      <span class="session">25 min</span>
      <button id="add" class="btn btn-info">+</button>
      <button id="take" class="btn btn-info">-</button>
    </div>
    <div class="col-xs-12">
      <h1 id="timer">25:00</h1>
    </div>
    <div class="col-xs-12">
      <button id="start" class="btn btn-success">Start</button>
      <button id="reset" class="btn btn-danger">Reset</button>
    </div>
  </div>
</div>

js:

function addMinute() {
  time + 60;
}

function removeMinute() {
  time - 60;
}

function updateSession(a) {
  $(".session").empty();
  $(".session").append(a + " min");
}

$(document).ready(function() { 
  var time = 1500;

  $("#add").click(function(time) {
    addMinute();
    updateSession(time);
  }) //end add.click
}); //end document.ready

Answer 1

您的问题与 JavaScript 作用域有关。您的 var time 仅在该函数内部可见，对外部函数不可见。您可以通过将 time 设置为全局变量或将其传递给您想要在其中使用它的函数来解决此问题。

您可以阅读有关 JavaScript 词法作用域的更多信息 here .

您还存在其他错误:time + 60 应为 time += 60，time - 60 应为 time - = 60 。