How to remove or disable evenListeners on click-CodePudding

I got to evenListeners one to start the timer and one to stop it Is it possible to make the start one to work only once and then get disabled until the stop button is clicked ???

startButton.addEventListener("click", startTimer);
stopButton.addEventListener("click", function stopFunction() {})

CodePudding user response：

Yes, you can just use removeEventListener

function startTimer() {
  // whatever code

  // Disable after use
  startButton.removeEventListern("click", startTimer);
}
startButton.addEventListener("click", startTimer);

// Reset listener after stop button clicked
stopButton.addEventListener("click", () => {
  startButton.removeEventListener("click", startTimer);
  startButton.addEventListener("click", startTimer);
});

Can also simplify with shorthand:

const disableBtn = () => startButton.removeEventListener("click", startTimer);
const enableBtn = () => (disableBtn(), startButton.addEventListener("click", startTimer));

function startTimer() {
  // whatever code
  disableBtn();
}
enableBtn();
stopButton.addEventListner("click", enableBtn);

CodePudding user response：

by using the line below you can remove the listener.

 startbutton.removeEventListener("click", startTimer);

and if you want to handle it with another button just call a function on click.

function stopFunction() {
   startbutton.removeEventListener("click", startTimer);
});