onclick vs addEventListener?

beginner

Event Listener Basics

Add event listeners to handle user interactions.

Learn addEventListener for click, input, and more.

📚 Concepts & Theory

Event Listeners

element.addEventListener('click', function() {
  console.log('Clicked!');
});

🎯 Your Challenge

Add a click listener that shows an alert.

📝 Starter Code

JavaScript

// HTML: <button id="alertBtn">Alert</button>

function setupListener() {
  // Your code here
}

Solution

JavaScript

function setupListener() {
  const btn = document.getElementById('alertBtn');
  btn.addEventListener('click', function() {
    alert('Button clicked!');
  });
}

setupListener();

Explanation

addEventListener attaches a handler function.

❓ Frequently Asked Questions

addEventListener supports multiple handlers