I want the timer to start after .exitA is clicked

JavaScript
1

There is a timer that appears on the screen after clicking .exitA, 1st button.

I want the timer to start after that button is clicked.

https://jsfiddle.net/87jvr3uh/

Right now, it stops after that button is clicked.

    <h2>Click anywhere to stop the timer</h2>

<p id="timer"></p>

<script>
  let seconds = 0;
  let timerId = setInterval(updateTimer, 100);

  function updateTimer() {
    seconds += 0.1;
    document.getElementById("timer").innerHTML = seconds.toFixed(1) + " seconds";
  }

  document.body.addEventListener("click", function() {
    clearInterval(timerId);
    document.getElementById("timer").innerHTML += " (stopped)";
  });

</script>

Here is the standalone timer code by itself:

https://jsfiddle.net/o4qLxnr8/2/

2

Hi,

Here’s your working timer: https://jsfiddle.net/migli/0utqr48a/3/

3

Until someone better at JS comes along …You’d need to start the timer when the button is clicked and then stop it when something else is clicked.

Take that script out of the html and put the code in a function that is called when you click that exitA button.

Roughly like this:


function exitClickHandler() {
  resetPage();
  updateMyTimer();/* added this */
  players.add(".playB", {
    playerVars: {
      list: "PLGBuKfnErZlAdX8X5LC9ODeHaxoxTuV2z",
      listType: "playlist"
    },
    shuffle: true
  });
}

function updateMyTimer() {
  let seconds = 0;
  let timerId = setInterval(updateTimer, 100);

  function updateTimer() {
    seconds += 0.1;
    document.getElementById("timer").innerHTML =
      seconds.toFixed(1) + " seconds";
  }

  document.body.addEventListener("click", function (e) {
    if (e.target.className !== "exitA") {
      clearInterval(timerId);
      document.getElementById("timer").innerHTML += " (stopped)";
    }
  });
}

You had the script being stopped when the body was clicked so effectively any button on the page would stop it because it was already running.

1 Like
4

Why can’t I get it to work here?

https://jsfiddle.net/ownxp1v6/

What am I dong wrong?

Right now, it stops after that button is clicked.

5

Because I did it wrong :slight_smile:

6

What is different about the other code?

7

Actually my code only works if you click the button before the animation has ended. If you wait until the animation has ended then the exitHandler is being called on animationEnd and that stops the timer because it effectively uses that routine.

Your js is a bit like spaghetti to me as it jumps all over the place.

1 Like
8

It’s fine, I have it working.

1 Like