Add time to a countdown clock

Question

I'm trying to do a rather simple function where when a button is clicked it adds time.

The sample is below:

var end = new Date('01/01/2019 12:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    
    if (distance < 0) {
       clearInterval(timer);
       document.getElementById('time').innerHTML = 'HAPPY NEW YEAR!';
       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('time').innerHTML = days + ' days, ';
    document.getElementById('time').innerHTML += hours + ' hrs, ';
    document.getElementById('time').innerHTML += minutes + ' mins, ';
    document.getElementById('time').innerHTML += seconds + ' secs';
}

timer = setInterval(showRemaining, 1000);

var timesection = document.getElementById("time");
var addtimeBtn = document.getElementById("addtime");

function addTime() {
    // trying to add time with this line
    _second + 30000;
    timesection.style.color="green";
    setTimeout(function(){ 
      timesection.style.color="#000"; 
    }, 1000);
}

addtimeBtn.addEventListener("click", addTime);

<div id="time"></div>
<button id="addtime">Place Bid</button>

In the function addTime, I just need to add 30 seconds to the clock. _seconds is a global variable and am just trying to simply add to that but it doesn't work and I have no idea why.

_seconds++ doesn't do anything either.

What am I missing? Why can't I add to the global variable _seconds? How do I do this simple operation?

EDIT:

I just thought of hitting distance since _second is just measuring the time and is not actually the time left

So I changes to this:

var end = new Date('01/01/2019 12:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

var now = new Date();
var distance = end - now;

function showRemaining() {
    
    if (distance < 0) {
       clearInterval(timer);
       document.getElementById('time').innerHTML = 'HAPPY NEW YEAR!';
       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('time').innerHTML = days + ' days, ';
    document.getElementById('time').innerHTML += hours + ' hrs, ';
    document.getElementById('time').innerHTML += minutes + ' mins, ';
    document.getElementById('time').innerHTML += seconds + ' secs';
}

timer = setInterval(showRemaining, 1000);

var timesection = document.getElementById("time");
var addtimeBtn = document.getElementById("addtime");

function addTime() {
    distance + 30000;
    timesection.style.color="green";
    setTimeout(function(){ 
      timesection.style.color="#000"; 
    }, 1000);
}

addtimeBtn.addEventListener("click", addTime);

<div id="time"></div>
<button id="addtime">Place Bid</button>

What happens and I don't understand this is that the timer completely stops, and the button doesn't work at all.

Why does moving those two variables outside the function break?

EDIT #2

Comment below suggested this approach:

var end = new Date('01/01/2019 12:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
var offset = 0;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    
    if (distance < 0) {
       clearInterval(timer);
       document.getElementById('time').innerHTML = 'HAPPY NEW YEAR!';
       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('time').innerHTML = days + ' days, ';
    document.getElementById('time').innerHTML += hours + ' hrs, ';
    document.getElementById('time').innerHTML += minutes + ' mins, ';
    document.getElementById('time').innerHTML += seconds + ' secs';
}

timer = setInterval(showRemaining, 1000);

var timesection = document.getElementById("time");
var addtimeBtn = document.getElementById("addtime");

function addTime() {
    offset += 30000;
    distance = end - now - offset;
    timesection.style.color="green";
    setTimeout(function(){ 
      timesection.style.color="#000"; 
    }, 1000);
}

addtimeBtn.addEventListener("click", addTime);

<div id="time"></div>
<button id="addtime">Place Bid</button>

Answer 1

For better reusability you can use something like factory and create as many timers as you need. You can parametrize them and they'll be independent.

function createTimer(end, timeElement, addTimeButton) {
  var endDate = new Date(end);
  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  function showRemaining() {
    var now = new Date();
    var distance = endDate - now;

    if (distance < 0) {
      clearInterval(timer);
      timeElement.textContent = "HAPPY NEW YEAR!";
      return;
    }

    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);
    var timeString = days + " days, " + hours + " hrs, " + minutes + " mins, " + seconds + " secs";

    timeElement.textContent = timeString;
  }

  timer = setInterval(showRemaining, 1000);

  function addTime() {
    endDate.setSeconds(endDate.getSeconds() + 30);
    timeElement.style.color = "green";

    setTimeout(function() {
      timeElement.style.color = "#000";
    }, 1000);
  }

  addTimeButton.addEventListener("click", addTime);

  return function clearTimer() {
    clearInterval(timer);
    addTimeButton.removeEventListener("click", addTime);
  };
}

var clearTimer = createTimer(
  "01/01/2019 12:00 AM",
  document.getElementById("time"),
  document.getElementById("addtime")
);

<div id="time"></div>
<button id="addtime">Place Bid</button>

You can call clearTimer() if you need to cancel it. And please, don't use Element.innerHTML for simple strings

Answer 2

I changed four lines in your first example to get it to work. They are marked by #1, #2, #3 and #4 in a comment. #4 is purely cosmetic, to make the timer update instant.

var end = new Date('01/01/2019 12:00 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var offset = 0; // #1
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now + offset; // #2
    
    if (distance < 0) {
       clearInterval(timer);
       document.getElementById('time').innerHTML = 'HAPPY NEW YEAR!';
       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('time').innerHTML = days + ' days, ';
    document.getElementById('time').innerHTML += hours + ' hrs, ';
    document.getElementById('time').innerHTML += minutes + ' mins, ';
    document.getElementById('time').innerHTML += seconds + ' secs';
}

timer = setInterval(showRemaining, 1000);

var timesection = document.getElementById("time");
var addtimeBtn = document.getElementById("addtime");

function addTime() {
    // trying to add time with this line
    offset = offset + 30000; // #3
    showRemaining(); // #4
    timesection.style.color="green";
    setTimeout(function(){ 
      timesection.style.color="#000"; 
    }, 1000);
}

addtimeBtn.addEventListener("click", addTime);

<div id="time"></div>
<button id="addtime">Place Bid</button>