How to check whether a Button is clicked by using JavaScript

Is there a simple way to do something along these lines:

JavaScript:

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

HTML:

<input type="submit" name="button" value="enter"/> 

9 Answers

You can add a click event handler for this:

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

This will alert when it's clicked, if you want to track it for later, just set a variable to true in that function instead of alerting, or variable++ if you want to count the number of clicks, whatever your ultimate use is. You can see an example here.

Try adding an event listener for clicks:

document.getElementById('button').addEventListener("click", function() { alert("You clicked me"); }​);​ 

Using addEventListener is probably a better idea then setting onclick - onclick can easily be overwritten by another piece of code.

You can use a variable to store whether or not the button has been clicked before:

var clicked = false document.getElementById('button').addEventListener("click", function() { clicked = true }​);​ 

addEventListener on MDN

This will do it

<input type="submit" name="button" onclick="myFunction();" value="enter"/> <script> function myFunction(){ alert("You button was pressed"); }; </script> 

All the answers here discuss about onclick method, however you can also use addEventListener().

Syntax of addEventListener()

document.getElementById('button').addEventListener("click",{function defination}); 

The function defination above is known as anonymous function.

If you don't want to use anonymous functions you can also use function refrence.

function functionName(){ //function defination } document.getElementById('button').addEventListener("click",functionName); 

You can check the detail differences between onclick() and addEventListener() in this answer here.

Just hook up the onclick event:

<input type="submit" name="button" value="enter" onclick="myFunction();"/> 

$("#button").on('click',function(){ //do something }); 

you can do something like this:

<button onClick="funtion()">Button Goes Here</button 

function alert(){ console.log('Alert Showed'); alert('You clicked me!'); }

<button onClick="alert()">Click me to get alerted</button>

function check() { console.log("Button Clicked"); }; var button= document.querySelector("button"); // Accessing The Button // button.addEventListener("click", check); // Adding event to call function when clicked // 

document.querySelector("#button").addEventListener("click", () => { console.log("button was clicked"); })