-2
document.getElementById("image1").onclick = function() {
    imageClickedOn()
}

all I want is so that when I click the image, I can't click it again until the function is over.

Juan184
  • 1
  • 3
  • 2
    what sort of element is image1 ? a button ? https://stackoverflow.com/help/how-to-ask + https://stackoverflow.com/help/minimal-reproducible-example – Mister Jojo Feb 11 '21 at 03:01
  • 1
    What do you mean by “function is over”? Do not use `.onclick`; instead use [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). It has a `once` setting if that’s what you’re looking for. – Sebastian Simon Feb 11 '21 at 03:08

4 Answers4

0

You can used a variable to determine if imageClickedOn() should be allowed to run. You would set it to true when the function starts and false when the function ends.

var isImageClicked = false;

document.getElementById("image1").onclick = function() {
    if (!isImageClicked) {
       imageClickedOn()
    }

}
imageClickedOn() {
    isImageClicked = true;
    ...
    isImageClicked = false;
}
redwingsdan
  • 111
  • 1
  • 1
  • 5
  • i did exactly this, and it just skips over the if statement like it wasn't there so that doesn't work. – Juan184 Feb 11 '21 at 03:13
  • 1
    @Juan184 Then you’re not giving us sufficient details as to what `imageClickedOn` does. `isImageClicked = false` is supposed to be executed when that function is “over”, whatever that means. If you have asynchronous calls or timeouts, you need to put that line _inside_ them. If that’s the case, please familiarize yourself with [asynchronous execution](https://stackoverflow.com/q/7104474/4642212). – Sebastian Simon Feb 11 '21 at 03:16
0

Do you mean like with a timeout?

let canClick = true;
img.addEventListener("click", function () {
  if (canClick) {
    //your function goes here
    console.log("image clicked");
  
    canClick = false;
    setTimeout(() => canClick = true, 2000); // 2000 milliseconds === 2 seconds
  }
});
img {
  width: 200px;
}
<img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png">

This will create a delay of 2 seconds before the user can click the image again.

luek baja
  • 1,475
  • 8
  • 20
0

When clicked, you can add a CSS class with pointer-events set to none to prevent subsequent clicks. Once your function has completed, you can remove the class.

function imageClickedOn() {
  // returns a promise that resolves in 1s
  return new Promise(res => setTimeout(res, 1000))
}

document.getElementById("image1").addEventListener("click", async (e) => {
  console.log("Image clicked")
  const img = e.target

  // Add class
  img.classList.add("disable-click")
  
  // Wait for function to complete
  await imageClickedOn()
  
  // Remove class
  img.classList.remove("disable-click")
})
.disable-click {
  pointer-events: none;
  
  /* the below just lets you see when it is not clickable */
  filter: blur(5px);
  opacity: .8;
}
<img id="image1" width="100" height="100" src="https://picsum.photos/100">

If your element is an <a> or <button>, you're probably better off toggling the disabled property instead.

Phil
  • 157,677
  • 23
  • 242
  • 245
-2

You can follow. https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dom;

But it not work you can try

$("#image1").click(()=>{ "function " })

พัฒนพล มุสิกนันท์
  • 1