Stopping Countdown using button in javascript in another function

Question

I am having a countdown in javascript and a button which will pause/stop the countdown.

{ "message": "Uncaught ReferenceError: x is not defined", "filename": "https://stacksnippets.net/js", "lineno": 57, "colno": 17 }

function start() {
  var table = document.getElementById("test");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  cell1.colSpan = 2;

  var countDownDate = new Date("Apr 30, 2019 11:12:27").getTime();


  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);




    cell1.innerHTML = seconds;

    //document.getElementById("timer").innerHTML = days + "d " + hours + "h "
    //+ minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x);
      cell1.innerHTML = "EXPIRED";
    }
  }, 1000);
}

function stop() {
  clearInterval(x);
}

<table id="test" class="table table-bordered table-responsive">

</table>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>

I know it can be stopped in the same function, but it is just an example, in my real code, it has to be stopped outside the function.

How to set x so that it works outside the function too?

Answer 1

Variable x is not defined out the function start, so function stop don't see it. Easy way to solve it, declare x global.

var x;
function start() {
  var table = document.getElementById("test");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  cell1.colSpan = 2;

  var countDownDate = new Date("Apr 30, 2019 11:12:27").getTime();


  // Update the count down every 1 second
  x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);




    cell1.innerHTML = seconds;

    //document.getElementById("timer").innerHTML = days + "d " + hours + "h "
    //+ minutes + "m " + seconds + "s ";

    if (distance < 0) {
      clearInterval(x);
      cell1.innerHTML = "EXPIRED";
    }
  }, 1000);
}

function stop() {
  clearInterval(x);
}

<table id="test" class="table table-bordered table-responsive">

</table>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>