Make something happen after clicking on an image 20 times HTML CSS JS

Question

I've tried google and it just doesnt help me right now. I am trying to make a rickroll that happens after you click on an image 20 times, but I have no idea where to start, can anyone help me? or even better present some code that works in stack overflow so I can see.

question from:https://stackoverflow.com/questions/65601935/make-something-happen-after-clicking-on-an-image-20-times-html-css-js

Answer 1

You can keep a counter that you increment in the click event handler.

let counter = 0;
document.querySelector('img').addEventListener('click', e => {
  ++counter;
  if (counter === 5) { //change to any number you want
    //do something
    console.log('clicked 5 times');
  }
});

<img src="https://www.w3schools.com/images/html5.gif" />