54

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"/>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Ruth
  • 5,646
  • 12
  • 38
  • 45

10 Answers10

106

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 7
    Note that setting onclick will overwrite existing event listeners, so it is probably better to use addEventListener here, as I outlined below (https://stackoverflow.com/a/57811342/10965456) – ecc521 Jun 26 '20 at 21:00
15

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

Unmitigated
  • 76,500
  • 11
  • 62
  • 80
ecc521
  • 576
  • 6
  • 14
5

This will do it

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

<script>
function myFunction(){
    alert("The button was pressed");
};   
</script>
Community
  • 1
  • 1
Sabba Keynejad
  • 7,895
  • 2
  • 26
  • 22
3

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.

Ashad Ahmad
  • 29
  • 2
2

Just hook up the onclick event:

<input id="button" type="submit" name="button" value="enter" onclick="myFunction();"/>
Paolo
  • 22,188
  • 6
  • 42
  • 49
  • 16
    Please don't use in-line handlers, [there are so many reasons not to do this](http://stackoverflow.com/questions/2479557/why-is-it-bad-practice-to-use-links-with-the-javascript-protocol/2479582#2479582). – Nick Craver May 07 '10 at 11:39
1
$("#button").on('click',function(){
//do something
});
Hello Hack
  • 107
  • 5
0
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 //
blueCrafter6
  • 191
  • 2
  • 8
Ganesh Koirala
  • 19
  • 1
0

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>
BreakLikesCoding
  • 17
  • 7
  • Welcome to StackOverflow. While this code may answer the question, providing additional context regarding *how* and/or *why* it solves the problem would improve the answer's long-term value. – Sven Eberth Jul 10 '21 at 22:21
0
document.querySelector("#button").addEventListener("click", () => {
    console.log("button was clicked");
})
T.Praveen
  • 49
  • 4
  • While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Luca Kiebel Feb 15 '22 at 09:25
0
// this event listener will help you detect clicks on the document
document.addEventListener('click', function(e){   
// <event>.<target>.<id> check that the id is 'button'
if(e.target.id === 'button'){
    // do something here 
    console.log(e.target.id); 
}

}

mangs
  • 1
  • 2