How to Fix JavaScript Event Listener Not Working

Q: ### Why does my event listener work on desktop but not on mobile?

Mobile browsers do not fire `click` events on some elements by default. Add `cursor: pointer` CSS or use `touchstart` and `touchend` events for mobile interactions. The 300ms tap delay may also cause issues. Set `touch-action: manipulation` CSS to eliminate the delay. ### Can I attach multiple listeners to the same element? Yes. Multiple listeners are called in the order they were attached. Each listener runs independently. Use `removeEventListener` with the same function reference to remove a specific listener without affecting others. ### Why does my event fire multiple times? This usually happens when the listener is attached inside a loop or a function that is called multiple times. Each call attaches a new listener. Check that you are not calling the attachment code in a re-render or a callback that runs more than once. Use `{ once: true }` if the listener should fire only once.

DodaTech Updated 2026-06-24 3 min read

In this tutorial, you'll learn about How to Fix JavaScript Event Listener Not Working. We cover key concepts, practical examples, and best practices.

The Problem

A JavaScript event listener does not fire when the expected user interaction occurs, typically due to the element not existing at attachment time, wrong event name, or the listener being removed before the event fires.

Quick Fix

Step 1: Verify the element exists

Attaching an event to a non-existent element silently fails:

document.querySelector('#submit').addEventListener('click', handleSubmit);

TypeError: Cannot read properties of null (reading 'addEventListener')

Check that the element exists in the HTML and the selector matches:

const el = document.querySelector('#submit');
if (el) {
    el.addEventListener('click', handleSubmit);
} else {
    console.error('#submit element not found in DOM');
}

Step 2: Use the correct event name

Event names are case-sensitive and must match the standard:

button.addEventListener('onclick', handleClick);

This listener will never fire because the event name is 'click', not 'onclick':

button.addEventListener('click', handleClick);

Step 3: Move script after the element

A script in <head> runs before the body elements exist:

<head>
    <script>
        document.querySelector('button').addEventListener('click', handler);
    </script>
</head>
<body>
    <button>Click</button>
</body>

Fix 1: Move the script to the end of <body>. Fix 2: Wrap in DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('button').addEventListener('click', handler);
});

Fix 3: Use the defer attribute on the script tag.

Step 4: Check for dynamically added elements

If an element is added after the listener is attached, use event delegation:

// This does NOT work for elements added later
document.querySelectorAll('.item').forEach(el => {
    el.addEventListener('click', handler);
});

// This DOES work using event delegation
document.addEventListener('click', (event) => {
    if (event.target.matches('.item')) {
        handler(event);
    }
});

Step 5: Verify the listener is not removed elsewhere

Check that no other code calls removeEventListener with the same function reference. If the handler is an anonymous function, it cannot be removed.

Prevention

Always verify element existence before attaching listeners.
Use event delegation for dynamically added elements.
Use DOMContentLoaded or defer for scripts that need the DOM.
Store named function references if you need to remove listeners later.
Log attachment success during development.

Common Mistakes with event listener

Forgetting deriving (Show, Eq) on custom data types needed for debugging
Placing the wildcard pattern first in case expressions, making all subsequent patterns unreachable
Using head and tail instead of pattern matching, causing runtime errors on empty lists

These mistakes appear frequently in real-world JS code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ

### Why does my event listener work on desktop but not on mobile?

Mobile browsers do not fire click events on some elements by default. Add cursor: pointer CSS or use touchstart and touchend events for mobile interactions. The 300ms tap delay may also cause issues. Set touch-action: manipulation CSS to eliminate the delay.

Can I attach multiple listeners to the same element?

Yes. Multiple listeners are called in the order they were attached. Each listener runs independently. Use removeEventListener with the same function reference to remove a specific listener without affecting others.

Why does my event fire multiple times?

This usually happens when the listener is attached inside a loop or a function that is called multiple times. Each call attaches a new listener. Check that you are not calling the attachment code in a re-render or a callback that runs more than once. Use { once: true } if the listener should fire only once.

← Previous Cum sa gestionezi erori in JavaScript Next → Cum sa gestionezi evenimente in JavaScript

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Quick Fix