Question

我有一个简单的bootstrap html布局设置，其中包含2个按钮#add和#take。从$（document）.ready函数调用它们的函数之前，一切正常，但是因为我还是需要重用这些函数，所以我决定将它们放在外面。

现在当我点击按钮时没有任何反应。有人可以告诉我我做错了吗？

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。

单击一个HTML按钮的javascript什么都不做

1 个答案: