Is there a way to check if a button has been clicked in HTML/Javascript?

Question

I was wondering if there is a way of checking if a button has been clicked? This is the button I want to check:

<button id="money" onClick="myFunction()"> £25 </button>

I've looked all over to try and find a solution but any method I've tried just creates errors, this is one solution I've tried:

function myFunction{
if(document.getElementById('money').clicked == true){
  alert("button was clicked")
}
}

Any help is greatly appreciated! Thanks

are you trying to make sure `myFunction` was *actually* called upon button click and not programmatically? — Chase, Dec 29 '20 at 15:33
you have already called myFunction() onClick handler of the button and again you are checking if(document.getElementById('money').clicked == true) why? — Shivanshu Gupta, Dec 29 '20 at 15:34
Buttons don't have any specific "clicked" property or a click counter. What do you want to do with that information? — Teemu, Dec 29 '20 at 15:39
@Teemu That's very helpful to know, thank you. I'm doing this to check if the button I want to create can actually be pressed. I've managed to find the solution now so don't worry about it :) — cloud5599, Dec 29 '20 at 16:15

mehranmb78 · Answer 1 · 2020-12-29T15:56:25.890

1

you can add class isClicked at the end of your function and after that each time you click it never work in your condition

function myFunction(){
  const el = document.getElementById('money');
  if (!Object.values(el.classList).some(function(x) {return x == 'isClicked'})) {
    alert('your code');
  }
  el.classList.add('isClicked');
}

<button id="money" onClick="myFunction()"> £25 </button>

edited Dec 29 '20 at 15:56

answered Dec 29 '20 at 15:38

mehranmb78

674
5
9

Alexander Bondar · Answer 2 · 2020-12-29T15:42:21.190

0

It should work when you remove the if(document.getElementById('money').clicked == true){ line and the corresponding curly brace, e.g.:

var clickedPreviously = false;
function myFunction() {
    if (clickedPreviously) {
        alert("button was clicked");
    }

    clickedPreviously = true;
}

edited Dec 29 '20 at 15:42

answered Dec 29 '20 at 15:33

Alexander Bondar

524
4
21

I don't think this is what OP actually wants. Perhaps they just want to verify the function call is actually legit and raised from an event, instead of forcefully called programmatically – Chase Dec 29 '20 at 15:34
I've extended my answer, so we now have information about previous click. – Alexander Bondar Dec 29 '20 at 15:43
@chase yes this is what I want to do, thank you all for the help – cloud5599 Dec 29 '20 at 16:03

Alanaj · Answer 3 · 2020-12-29T16:11:34.140

0

You don't need the if statement. You would just have to add an event listener on the button like this:

    function myFunction() {
     document.getElementById('money').addEventlistener('click', () => {
        alert('button clicked')

     }

edited Dec 29 '20 at 16:11

answered Dec 29 '20 at 15:35

Alanaj

237
2
12

oguzhancerit · Answer 4 · 2020-12-29T15:58:44.223

To do this you can add the element a specific class name which is "alreadyClicked" in this snippet after that you can check the element has this class or not with the hasClass() function that I share below.

function myFunction() {
  if(hasClass(document.getElementById('money'),'alreadyClicked')){
    console.log("button was already clicked");
  }
  else {
    console.log("First click, added to class: alreadyClicked to element");
    document.getElementById('money').classList.add("alreadyClicked");
  }
}

function hasClass(el, cn){
    var classes = el.classList;
    for(var j = 0; j < classes.length; j++){
        if(classes[j] == cn){
            return true;
        }
    }
}

<button id="money" onClick="myFunction()"> £25 </button>

Another solution is using a new attribute with the same logic. You can add an attribute your element like data-clicked="false". According to Mozilla explained here;

Any attribute on any element whose attribute name starts with data- is a data attribute. Say you have an article and you want to store some extra information that doesn’t have any visual representation. Just use data attributes for that.

<button
  id="money"
  data-clicked="true"
  data-clicked-count="3">
£25</button>

To reach the data attributes with Javascript you can use below snippet.

var element = document.getElementById('money');
element.dataset.clicked; // true
element.dataset.clickedCount; // 3

And also you can set them more easily than class name updating and checking.

var element = document.getElementById('money');
element.dataset.clickedCount = 4

Full Solution with Data Attr

function myFunction() {
  const myButton = document.querySelector('#money');
  if(myButton.dataset.clicked == 'false'){
    myButton.dataset.clicked = 'true';
    console.log("data-clicked updated!");
  }
  
  myButton.dataset.clickedCount = parseInt(myButton.dataset.clickedCount)+1;
  console.log("count of click : "+myButton.dataset.clickedCount);
  
}

function hasClass(el, cn){
    var classes = el.classList;
    for(var j = 0; j < classes.length; j++){
        if(classes[j] == cn){
            return true;
        }
    }
}

<button 
  id="money" 
  onClick="myFunction()" 
  data-clicked='false' 
  data-clicked-count='0'> 
  £25 
</button>

score -1 · Answer 5 · answered Dec 29 '20 at 15:40

-1

Try like this

document.getElementById('money').onclick = function() {
   alert("button was clicked");
};

document.getElementById('money').onclick = function() {
   alert("button was clicked");
};

<button id="money"> £25 </button>

answered Dec 29 '20 at 15:40

Adhitya

660
1
4
18

Is there a way to check if a button has been clicked in HTML/Javascript?

5 Answers5