Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is onclick not working for two or more links for same function in JavaScript?
When onclick events don't work for multiple elements with the same function, it's usually because you're only attaching the event to one element or using incorrect selectors. The solution is to use document.querySelectorAll() to select all matching elements and attach event listeners to each one.
The Problem
A common mistake is trying to attach a click event to multiple elements using document.querySelector(), which only selects the first matching element, or using incorrect event binding methods.
Solution: Using querySelectorAll() with Event Listeners
Here's how to properly attach click events to multiple elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Click Events</title>
</head>
<body>
<div class="clickable-link">Click me - Link 1</div>
<div class="clickable-link">Click me - Link 2</div>
<div class="clickable-link">Click me - Link 3</div>
<div id="output"></div>
<script>
// Select all elements with class 'clickable-link'
const links = document.querySelectorAll('.clickable-link');
// Attach click event to each element
links.forEach(function(link, index) {
link.addEventListener('click', function() {
document.getElementById('output').innerHTML +=
`<p>Clicked: ${this.textContent}</p>`;
});
});
</script>
</body>
</html>
Alternative: Event Delegation
For better performance with many elements, use event delegation by attaching one listener to a parent element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Delegation</title>
</head>
<body>
<div id="container">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Contact</a>
</div>
<div id="result"></div>
<script>
// Single event listener on parent container
document.getElementById('container').addEventListener('click', function(e) {
if (e.target.classList.contains('nav-link')) {
e.preventDefault();
document.getElementById('result').innerHTML =
`<p>Navigation: ${e.target.textContent}</p>`;
}
});
</script>
</body>
</html>
Comparison of Methods
| Method | Performance | Use Case |
|---|---|---|
querySelectorAll + forEach |
Good for few elements | Static elements known at page load |
| Event Delegation | Better for many elements | Dynamic content or many similar elements |
Common Mistakes to Avoid
- Using
querySelector()instead ofquerySelectorAll()- only attaches to first element - Forgetting to loop through the NodeList returned by
querySelectorAll() - Not using
preventDefault()for anchor tags when needed
Conclusion
Use querySelectorAll() with forEach() to attach events to multiple elements, or use event delegation for better performance. Both methods ensure all matching elements respond to click events properly.
400 Views
