Change var speed value onClick?

Question

When a user clicks a button, it will change the var speed value. How can i do this? At the moment, its set to 1000 ms // 1 second, shown on this line:

var increment = setInterval(increment,1000); // gain 1 ever second // THIS IS WHAT I WANT TO CHANGE

I want to change that 1000 to 2000 onClick of a button. I think its called the increment value? I just know its the speed in which i set it to gain a number in that time of 1000ms.

Code Link:

http://pastebin.com/UPaT9n3F

Answer 1

you can clear the interval and create it again

$('#element').click(function(){
     window.clearInterval(incrementID); //
     timing = timing + 1000; //this is if you plan to keep adding up.
     incrementID = setInterval(increment, timing);// if not you can always hardcode 2000
});

also:

var timing = 1000;
var incrementID = setInterval(increment,timing); // gain 1 ever second // THIS IS WHAT I WANT TO CHANGE
//you should change the varname so that you can use the handle to clear the already set interval

Answer 2

I'd change it to use setTimeout. So:

var increment = setInterval(increment,1000); // gain 1 ever second // THIS IS WHAT I WANT TO CHANGE
function increment(){
    Coal = Coal % 99999999999999999999 + CoalRate;
    totalCoal = totalCoal % 99999999999999999999 + CoalRate;
    document.getElementById("Coalcounter").innerHTML="Coal : " + Math.round(Coal);
    document.getElementById("CoalClickercost").innerHTML="Upgrade Coal Clicker : " + Math.round(CoalClickerPrice);
    document.getElementById("CoalRatecost").innerHTML="Upgrade Coal Rate : " + Math.round(CoalRatePrice);
}

Would become:

var interval = 1000
function increment(){
    Coal = Coal % 99999999999999999999 + CoalRate;
    totalCoal = totalCoal % 99999999999999999999 + CoalRate;
    document.getElementById("Coalcounter").innerHTML="Coal : " + Math.round(Coal);
    document.getElementById("CoalClickercost").innerHTML="Upgrade Coal Clicker : " + Math.round(CoalClickerPrice);
    document.getElementById("CoalRatecost").innerHTML="Upgrade Coal Rate : " + Math.round(CoalRatePrice);
    window.setTimeout(interval)
}
increment()

Then your onclick becomes as simple as something like..

<button onclick="swapInterval">Swap</button>

and

function swapInterval() {
    if(interval==1000) interval = 2000
    else interval = 1000
}

Note that this won't change it for the current loop (e.g. if you're on 2000, you push the button after 500ms, you'll still need to wait another 1500ms before it triggers).