2015-08-24 106 views
0

我有一個名爲session的變量,當點擊一個按鈕時,我正在遞增或遞減。然後,我有一個計時器,它採用會話變量的參數,該會話變量在單擊開始按鈕時開始,但我的會話變量仍然是初始化的原始值。我如何更新價值以便能夠實時使用它?javascript變量不更新

的jsfiddle - https://jsfiddle.net/0u24qr47/2/

感謝。

HTML

<h1>Adjust Work Time</h1> 
<div id="workTime"></div> 
<button class="btn btn-success" id="workMinus">-</button> 
<button class="btn btn-success" id="workPlus">+</button> 
<h1>Break Time</h1> 
<div id="breakLength"></div> 
<button class="btn btn-success" id="breakMinus">-</button> 
<button class="btn btn-success" id="breakPlus">+</button> 
<h1>Clock</h1> 
<div><span class="time"></span> 

</div> 
<button class="btn btn-success start" id="start">start</button> 

的Javascript

$(document).ready(function() { 
    var session = 25; 
    var breaks = 5; 
    var workTime = document.getElementById('workTime'); 
    var breakLength = document.getElementById('breakLength'); 

    //update display// 

    workTime.innerHTML = session; 
    breakLength.innerHTML = breaks; 

    //functions for updating variables// 

    function wMinus() { 
     session--; 
     workTime.innerHTML = session; 
    } 

    function wPlus() { 
     session++; 
     workTime.innerHTML = session; 
    } 

    function bMinus() { 
     breaks--; 
     breakLength.innerHTML = breaks; 
    } 

    function bPlus() { 
     breaks++; 
     breakLength.innerHTML = breaks; 
    } 

    //update variables when clicked// 

    $("#breakMinus").click(function() { 
     bMinus(); 
    }); 

    $("#breakPlus").click(function() { 
     bPlus(); 
    }); 

    $("#workMinus").click(function() { 
     wMinus(); 
    }); 

    $("#workPlus").click(function() { 
     wPlus(); 
    }); 

    window.onload = function() { 
     console.log("in onload" + session); 
     var display = document.querySelector('.time'), 
      timer = new CountDownTimer(session), 
      timeObj = CountDownTimer.parse(session); 

     format(timeObj.minutes, timeObj.seconds); 

     timer.onTick(format); 

     //click// 
     document.querySelector('#start').addEventListener('click', function() { 
      timer.start(); 
     }); 

     function format(minutes, seconds) { 
      minutes = minutes < 10 ? "0" + minutes : minutes; 
      seconds = seconds < 10 ? "0" + seconds : seconds; 
      display.textContent = minutes + ':' + seconds; 
     } 
    }; 
}); 
+0

爲什麼你在document.ready中有window.onload? – Shomz

回答

0

參數是按值傳遞,而不是參考。執行此線時可變session的值傳遞給定時器的構造函數(當你的頁面加載):

timer = new CountDownTimer(session), 

您需要創建計時器時,「啓動」按鈕被點擊,並通過它那麼值session,而不是頁面加載時。