This content originally appeared on DEV Community and was authored by purity nekesa

JavaScript Event Listeners: Making My Guest List App Interactive

As a web development student, I built an Event Guest List Manager to practice JavaScript. A key feature was making it interactive, letting users add guests with a button click. Here’s how I used JavaScript event listeners to bring my app to life and what I learned.

The Code: Adding a Guest with a Click

In my app, users enter a guest’s name and click a button to add it to a list. I used an event listener to handle the click and update the DOM dynamically. Here’s the code:

const guestList = document.getElementById('guest-list');
const addGuest = () => {
  const name = document.getElementById('guest-input').value;
  if (name) {
    const li = document.createElement('li');
    li.textContent = name;
    guestList.appendChild(li);
    document.getElementById('guest-input').value = ''; // Clear input
  } else {
    alert('Please enter a name!');
  }
};
document.getElementById('add-button').addEventListener('click', addGuest);

This code selects the guest list (<ul id="guest-list">), gets the input value, creates a new <li> element, and adds it to the list when the button is clicked. The addEventListener method ensures the addGuest function runs only on click, keeping the app responsive.

Challenges Faced

I initially wrote onclick = addGuest(), which ran the function immediately instead of waiting for a click. This broke my app, as guests were added on page load! Using Chrome DevTools, I saw the function was triggered too early. Switching to addEventListener('click', addGuest) fixed it by passing the function reference, not executing it. This taught me the importance of understanding event listener syntax.

Takeaways

Event listeners are the backbone of interactive web apps. They let me connect user actions to code, like adding guests dynamically. I learned to test my code carefully and use DevTools for debugging. This skill is key for forms, buttons, and more in web development.

This content originally appeared on DEV Community and was authored by purity nekesa