Question

[Solved] 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 id="button" type="submit" name="button" value="enter"/>
Enquirer: Ruth

||

Solution #1:

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.

Respondent: Nick Craver

Solution #2:

This will do it

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

<script>
function myFunction(){
    alert("You button was pressed");
};   
</script>
Respondent: Sabba Keynejad

Solution #3:

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 onclickonclick 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

Respondent: ecc521

Solution #4:

Just hook up the onclick event:

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

Solution #5:

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.

Respondent: Ashad Ahmad

Solution #6:

if(button.clicked==true) {
    console.log("Button Clicked");
} ==> // This Code Doesn't Work Properly So Please Use Below One // 


function check() { 
    console.log("Button Clicked");
}; // This Code Works Fine // 

var button= document.querySelector("button"); // Accessing The Button // 
button.addEventListener("click", check); // Adding event to call function when clicked // 
Respondent: Ganesh Koirala

Solution #7:

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

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy