javascript, щелкнув по кнопке html, ничего не делает

Question

У меня есть простая настройка компоновки html bootstrap, которая содержит 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> 

ЯШ:

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.