javascript clicking a html button does nothing

Question

I have a simple bootstrap html layout setup, which contains 2 buttons #add and #take. When calling their functions before from the $(document).ready function, everything works, but since I will need to reuse the functions anyway I decided to put them outside.

Now when I click the button nothing happens. Can somebody please tell me what I'm doing wrong?

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

Your problem has to do with JavaScript scoping. Your var time is only visible inside that function, and not to the outer functions. You can fix this by making time a global variable or by passing it to the functions you want to use it in.

You can read more about JavaScript's lexical scoping here.

You also have other errors: time + 60 should be time += 60 and time - 60 should be time -= 60.