Javascript click start / stop interval function

Question

I want to start a interval / function if the user clicks on a button and stop that if the user clicks on stop. But somehow it immidietly starts the startRecord function. What am I doing wrong.

HTML:

 window.onload = startRecord; startRecord = document.getElementById('startRecord'); stopRecord = document.getElementById('stopRecord'); function startRecord() { startRecord.onclick = generateImg(true); startRecord.style.display = "none"; stopRecord.style.display = "block"; } function stopRecord() { stopRecord.onclick = generateImg(false); startRecord.style.display = "block"; stopRecord.style.display = "none"; } function generateImg(start) { if (start) { var startInterval = setInterval(function() { console.log("foo") }, 1000); } else { clearInterval(startInterval); console.log("stop foo") } } 

 <div class="btn-group"> <button type="button" class="btn btn-default btn-lg" id="startRecord"> <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Start</a> </button> <button type="button" class="btn btn-default btn-lg" id="stopRecord"> <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Stop</a> </button> </div> 

Answer 1

You will need to define var startInterval in global scope.

startRecordButton = document.getElementById('startRecord');
stopRecordButton = document.getElementById('stopRecord');
startRecordButton.onclick = startRecord;
stopRecordButton.onclick = stopRecord;

var startInterval;

function startRecord() {
  generateImg(true);
  startRecord.style.display = "none";
  stopRecord.style.display = "block";
}

function stopRecord() {
  generateImg(false);
  startRecord.style.display = "block";
  stopRecord.style.display = "none";
}

function generateImg(start) {
  if (start) {
    startInterval = setInterval(function() {
      console.log("foo")
    }, 1000);
  } else {
    clearInterval(startInterval);
    console.log("stop foo")
  }
}

Answer 2

remove the onload event, bind event directly to the buttons. see the node snippet.

 btnStartRecord = document.getElementById('startRecord'); btnStopRecord = document.getElementById('stopRecord'); window.onload = function() { btnStartRecord.style.display = "block"; btnStopRecord.style.display = "none"; } var startInterval; function startRecord() { generateImg(true); btnStartRecord.style.display = "none"; btnStopRecord.style.display = "block"; } function stopRecord() { generateImg(false); btnStartRecord.style.display = "block"; btnStopRecord.style.display = "none"; } function generateImg(start) { if (start) { startInterval = setInterval(function() { console.log("foo") }, 1000); } else { clearInterval(startInterval); console.log("stop foo") } } 

 <div class="btn-group"> <button type="button" onclick="startRecord()" class="btn btn-default btn-lg" id="startRecord"> <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Start</a> </button> <button type="button" onclick="stopRecord()" class="btn btn-default btn-lg" id="stopRecord"> <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Stop</a> </button> </div> 

Answer 3

Issues with your code:

• Your variable name and function name is same:

startRecord = document.getElementById('startRecord');
function startRecord() {

as the variables are hoisted, startRecord will hold last assigned value.

• Its a bad idea to use onclick = function . Every assignment would replace previous value. Use .addEventListener instead.
• You are updating UI states on startRecord and endRecord but on click, these function are not called. Use a function to do all that in one function and use that as event handler.
• startInterval is a local variable. So when you click on stop, it has lost its scope. Define it as a global variable.

Sample Code

 var startInterval = null; var startRecordBtn = document.getElementById('startRecord'); var stopRecordBtn = document.getElementById('stopRecord'); function registerEvents(){ startRecordBtn.addEventListener("click", startRecord); stopRecordBtn.addEventListener("click", stopRecord); } function startRecord() { generateImg(true); startRecordBtn.style.display = "none"; stopRecordBtn.style.display = "block"; } function stopRecord() { generateImg(false); startRecordBtn.style.display = "block"; stopRecordBtn.style.display = "none"; } function generateImg(start) { if (start) { startInterval = setInterval(function() { console.log("foo") }, 1000); } else { clearInterval(startInterval); console.log("stop foo") } } registerEvents(); window.addEventListener("load", startRecord); 

 <div class="btn-group"> <button type="button" class="btn btn-default btn-lg" id="startRecord"> <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Start</a> </button> <button type="button" class="btn btn-default btn-lg" id="stopRecord"> <a href="#" class="btn btn-default glyphicon glyphicon-hand-up">Stop</a> </button> </div>