Menu
I have this code for Google analytics on a button. I need it to be executed only once, so that the user can't change statistics by pressing the button many times. I tried solutions from similar topics, but they don't work. Please help. This is my code.
<script>
function klikaj(i) {
gtag('event', 'first-4', {
'event_category' : 'cat-4',
'event_label' : 'site'
});
}
document.body.addEventListener("click", klikaj(i), {once:true})
</script>
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">My button</div>
836
.once - a link registered to the click event which when triggered calls test () and renders the link unclickable. Show activity on this post. There is a problem with the way you are trying to attach your handler function.
Similarly, calling multiple functions inside of the onClick handler is also possible: Again, the code above is not as readable as it could be if we just called the sayHello function and set the state inside of that. However, there may be instances when you need to do the above.
If you want the function to be called only when user clicks the button, you will have remove the click event listener from the body. To fire your gtag function only once you can change the function definition of klikaj inside the function body itself. After the first call gtag will never be called.
In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app.
Remove onclick attribute on your button and register listener via JavaScript, as you tried to do:
<div id="thumb0" class="thumbs"
style="border: 1px solid; cursor: pointer; float: left">
My button
</div>
<script>
function klikaj(i) {
console.log(i);
}
document.getElementById('thumb0')
.addEventListener("click", function(event) {
klikaj('rad1');
}, {once: true});
</script>If your browser doesn't support { once: true } option, you can remove event listener manually:
<div id="thumb0" class="thumbs"
style="border: 1px solid;cursor: pointer;float:left">
My button
</div>
<script>
function klikaj(i) {
console.log(i);
}
function onClick(event) {
klikaj('rad1');
document
.getElementById('thumb0')
.removeEventListener("click", onClick);
}
document
.getElementById('thumb0')
.addEventListener("click", onClick);
</script>you could use removeAttribute() like this: document.getElementById('thumb0').removeAttribute("onclick");
or you could let the function return false like this: document.getElementById('thumb0').onclick = ()=> false
10
I would recommend setting a variable and checking its value.
<script>
var clicked = false;
function klikaj(i) {
if (clicked === false) {
gtag('event', 'first-4', {
'event_category' : 'cat-4',
'event_label' : 'site'
});
}
clicked = true;
}
...
</script>
Or removing the onclick event as suggested by others,
<script>
function klikaj(i) {
gtag('event', 'first-4', {
'event_category' : 'cat-4',
'event_label' : 'site'
});
document.getElementById('thumb0).onclick = undefined;
}
...
</script>
Note that once: true is unfortunately not supported in IE and Edge. See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
7
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
