CODEWITHSUNDEEP
javascripthtml
A444433232
A444433232

Reputation: 47

How to initiate this timer with an image button?

I have a 30 second timer and an image. I want the timer to only commence when the image is clicked, i.e. an image button - how do I go about this?

This is how I currently have the timer, with displays on the page itself:

<h2>Countdown left: <span id="timer"></span></h2>

And this is the image:

<img id="img" src="image.gif" />

My timer is JS:

var seconds = 30;
var countdown = setInterval(function() {
  seconds--;
  document.getElementById("countdown").textContent = seconds;
  if (seconds <= 0) clearInterval(countdown);
}, 1000);

How can I combine the two?

Upvotes: 1

Views: 447

Answers (5)

akitirk
akitirk

Reputation: 53

function startTimer() {
  var seconds = 30;
  var countdown = setInterval(function() {
    seconds--;
    document.getElementById("timer").textContent = seconds;
    if (seconds <= 0) clearInterval(countdown);
  }, 1000);
}
<h2>Countdown left: <span id="timer"></span></h2>
<img id="img" src="image.gif" onClick="startTimer()" />

You can try wrapping the setInterval in a function and call that function on click of image

Upvotes: 1

Parth M. Dave
Parth M. Dave

Reputation: 1163

i think you need to create one function on click of image : HTML

    <img id="img" src="image.gif" onclick="StartTimer()" />

    <script type="text/javascript">
    function StartTimer() {
        var seconds = 30;
        var countdown = setInterval(function() {
        seconds--;
        document.getElementById("countdown").textContent = seconds;
        if (seconds <= 0) clearInterval(countdown);
        }, 1000);
    }
    </script>

Upvotes: 1

TechySharnav
TechySharnav

Reputation: 5084

You can add click event listener to the image, which will initiate the timer. Also, I have added {once: true} so that the function would execute only once (else it will bug out the timer).

document.querySelector("#img").addEventListener("click", () => {
  var countdown;

  var seconds = 30;

  countdown = setInterval(function() {
    seconds--;
    document.getElementById("timer").textContent = seconds;
    if (seconds <= 0) clearInterval(countdown);
  }, 1000)
},{ once: true});
<h2>Countdown left: <span id="timer"></span></h2>

<img id="img" src="https://assets.stickpng.com/thumbs/59060d740cbeef0acff9a660.png" />

If you want to reset the timer on each click, you need to clearInterval before setting another.

var countdown;

document.querySelector("#img").addEventListener("click", () => {
  if (countdown) {
    clearInterval(countdown);
  }

  var seconds = 30;

  countdown = setInterval(function() {
    document.getElementById("timer").textContent = seconds;

    seconds--;
    if (seconds <= 0) clearInterval(countdown);
  }, 1000)
});
<h2>Countdown left: <span id="timer"></span></h2>

<img id="img" src="https://assets.stickpng.com/thumbs/59060d740cbeef0acff9a660.png" />

Upvotes: 2

SBartlett97
SBartlett97

Reputation: 91

If you wrap your existing js in a function, you can add it as a method for the click event listener on the button.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h2>Countdown left: <span id="timer"></span></h2>
  <img id="img" src="image.gif" />
  <script>
    function count(){
      var seconds = 30;
      var countdown = setInterval(function() {
       
       document.getElementById("timer").textContent = seconds;
       seconds--;
       if (seconds < 0) clearInterval(countdown);
      }, 1000);
      
    }
    document.getElementById('img').addEventListener('click', count)
  </script>
</body>
  
</html>

Upvotes: 1

Sumit Surana
Sumit Surana

Reputation: 1584

let timer;

const onClick = () => {
  // Initial seconds
  let count = 30;
  
  // Element where the count down needs to be displayed
  const element = document.querySelector('#timer');
  
  // Remove the timer if it already exists. This would be helpful
  // in case the user clicks again on the image. When User clicks
  // again on the image, the existing timer is reset
  if (timer) {
    clearInterval(timer);
  }
  
  //Display the initial value i.e. 30 in this case
  element.textContent = count;
  
  //Decrease the timer by a second using setInterval
  timer = setInterval(() => {
    count -= 1;
    
    // If counter is less than or equal to zero, then
    // remove the existing count down and perform the logic
    // of what should happen when the count down completes
    if (count <= 0) {
      clearInterval(timer);
      element.textContent = '';
      return;
    }
    element.textContent = count;
  }, 1000);
}

// Attaches the click event on the image
const image = document.querySelector('#img');
if (image) {
  image.addEventListener('click', onClick)
}
<h2>Countdown left: <span id="timer"></span></h2>
<img id="img" src="https://picsum.photos/200" />

Upvotes: 1

Related Questions