The HTML onclick event
The HTML onclick attribute runs JavaScript each time an element is clicked, as in <button onclick="save()">. Pressing Enter or Space on a focused button fires it too. From JavaScript, assign element.onclick or call addEventListener('click', ...).
Overview
The HTML onclick attribute runs JavaScript when the user clicks an element. Its value is the code to run, such as save(), and every HTML element accepts it. The event it handles is called click.
A click isn't only a mouse action. Pressing and releasing the primary mouse button counts, and so do a tap and keyboard activation of elements such as buttons. Enter and Space on a focused button fire a click, Enter on a link does too, and the same keys on a div with tabindex fire nothing.
The browser wraps the attribute's code in a function, so the code can use this for the element and event for the click. That event has been a PointerEvent since Chrome 92, Firefox 129 and Safari 18.2. Its pointerType is empty for keyboard clicks.
An element holds one onclick handler at a time. Assigning element.onclick again, or rewriting the attribute, replaces the old handler, while addEventListener adds listeners side by side. That makes addEventListener the safer choice when two scripts react to the same element.
Syntax
<button type="button" onclick="addToCart(42)">Add to cart</button>
<script>
function addToCart(id) {
console.log('Added item', id);
}
</script>Example
<button type="button" onclick="count(this)">Clicked 0 times</button>
<p>Click it with the mouse, or press Tab and then Enter or Space.</p>
<script>
let clicks = 0;
function count(button) {
clicks++;
button.textContent = 'Clicked ' + clicks + (clicks === 1 ? ' time' : ' times');
}
</script>Best practices
- Put onclick on a <button> with
type="button". Inside a form, a button without a type submits the form after your onclick code runs. - Write the full call with parentheses, as in
onclick="addToCart(42)". A bare name such asonclick="addToCart"does nothing when clicked. - Declare the functions that onclick calls in a classic script, not a module. A function inside
<script type="module">isn't global, so the onclick code throws a ReferenceError. - Pass the element with
this, as inonclick="count(this)", rather than searching for the element again inside the function. - Expect inline handlers to fail under a strict Content Security Policy. A
script-src 'self'policy blocks onclick attributes, so sites with such a policy attach listeners from script files.
Accessibility
Attach onclick to a button or link so every user can activate it. The click event is device-independent, so touch, keyboard, mouse and assistive technology can all fire it. A div or span with onclick gets no keyboard activation, so keyboard users can't trigger it.
Frequently asked questions
What does onclick do in HTML?
How do I call a JavaScript function with onclick?
How do I set onclick in JavaScript?
button.onclick = () => save(). Use addEventListener('click', save) instead when other code may handle the same click.How do I stop a link from navigating with onclick?
return false, or call event.preventDefault(), and the link won't follow its href. In a listener added with addEventListener, return false does nothing, so call preventDefault() there.
