Disable onclick when clicked once - onclick

Question

This is a simple website that consists of finding some objects, when you click on each one of them a sweetalert pops up. What I want is to disable onclick when clicked once. There is a counter that tells you how many objects you have found but it won't work properly until I disable doble click. This is the link to replit: https://replit.com/#IzanLabrado/buscandoobjetos#index.html

Answer 1

You can unbind an onclick event as outlined in this stackoverflow question in your callback.
function general1() {
alert("I'll only be clicked once");
document.getElementById('image1').onclick=null;
}
#image1 {
background: lightblue;
width: 250px;
height: 50px;
border: 1px solid black;
cursor: pointer;
}
<button id="image1" onclick="general1()">Clicking me works once</button>
Setting onclick to null as part of your callback will prevent the function being called through a click event.
The more maintainable way to code this though would be to have a "state" object of some kind. Like a list of ids that starts empty and you add to each time the item gets clicked. This would allow you to only need to write one function, and you would call it from your html with a different id. Instead of list, you could simplify it further by using set so that duplicate ids can be added without increasing the size of your set.
const foundImages = new Set();
function foundImage(id) {
if (!foundImages.has(id)) {
alert("Congratulations you clicked a new one");
}
foundImages.add(id);
document.getElementById("count").innerHTML=foundImages.size;
}
<div id="1" onclick="foundImage(1)">Item1</div>
<div id="2" onclick="foundImage(2)">Item2</div>
<div id="3" onclick="foundImage(3)">Item3</div>
<p>You have found <span id="count">0</span> images </p>