JS onclick event

Prev Next

The onclick event is triggered when a user clicks on an element. It is commonly used to execute a JavaScript function when the click event occurs. This can be useful for a variety of tasks such as form validation, showing alerts, or changing content dynamically.

HTML onclick Attribute

You can directly attach a function to the onclick event of an HTML element using the onclick attribute.

Syntax:

<element onclick="functionName()">Click me</element>

Example:

<button style="padding: 10px; font-size: 16px" onclick="showAlert()">Click me</button>

<script>
function showAlert() {
  alert("Button clicked!");
}
</script>

Output:

onclick with addEventListener

For greater flexibility, you can attach an event handler using the addEventListener() method. This approach is preferred when you need to add multiple event handlers or when working with modern JavaScript.

Syntax:

element.addEventListener('click', functionName);

Example:

<button style="padding: 10px; font-size: 16px" id="myButton">Click me</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
  alert("Button clicked using addEventListener!");
});
</script>

Output:

Prev Next