How to Apply a Function to Multiple Elements with the Same ID in JavaScript? Last Updated : 22 Nov, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report In HTML, the id attribute should be unique for each element. However, if there are multiple elements with the same id (which is not recommended but possible), JavaScript can still handle them using certain methods.1. Use querySelectorAllRetrieve all elements with the same id using querySelectorAll.querySelectorAll('#myId') selects all elements with the id="myId"..forEach() loops through the NodeList of matching elements and applies the specified function. JavaScript JavaScriptdocument.querySelectorAll('#myId').forEach(element => { element.style.color = 'blue'; // Example action: change text color to blue }); 2. Use getElementsByTagName and FilterIf the elements with the same id are of a specific tag, filter them using getElementsByTagName.getElementsByTagName('div') retrieves all <div> elements..filter(el => el.id === 'myId') ensures only the elements with the specific id are selected..forEach() iterates through these elements to apply the function. JavaScript const elements = Array.from(document.getElementsByTagName('div')).filter(el => el.id === 'myId'); elements.forEach(element => { element.style.backgroundColor = 'yellow'; // Example action: change background color }); 3. Use a Custom Attribute Instead of idA better approach is to use a unique data-* attribute instead of repeating id. Then, select elements using this attribute.data-* attributes are valid for multiple elements and better suited for such use cases.querySelectorAll('[data-custom-id="myId"]') selects all elements with the custom attribute..forEach() applies the desired function. JavaScript document.querySelectorAll('[data-custom-id="myId"]').forEach(element => { element.textContent = 'Updated'; // Example action: update text content }); Comment More infoAdvertise with us Next Article How to get all ID of the DOM elements with JavaScript ? A anujpaz9pe Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to get all ID of the DOM elements with JavaScript ? Given a HTML document and the task is to get the all ID of the DOM elements in an array. There are two methods to solve this problem which are discusses below: Approach 1: First select all elements using $('*') selector, which selects every element of the document.Use .each() method to traverse all 2 min read How to Select an Element by ID in JavaScript ? In JavaScript, we can use the "id" attribute to interact with HTML elements. The "id" attribute in HTML assigns a unique identifier to an element. This uniqueness makes it easy for JavaScript to precisely target and manipulate specific elements on a webpage. Selecting elements by ID helps in dynamic 2 min read Call multiple JavaScript functions in onclick event Calling multiple JavaScript functions in an onclick event means executing several functions sequentially when a user clicks an element, like a button. This approach allows you to trigger multiple actions or behaviors with a single click, enhancing interactivity and functionality in web applications. 2 min read How to Add an ID to Element in JavaScript ? In JavaScript, the ID is the unique identifier through which the elements can be identified and manipulated if required. We can add an ID to an element in JavaScript using various approaches that are explored in this article with practical demonstration. Below are the possible approaches: Table of C 2 min read How to get/change the HTML with DOM element in JavaScript ? In order to get/access the HTML for a DOM element in JavaScript, the first step is to identify the element base on its id, name, or its tag name. Then, we can use inner.HTML or outer.HTML to get the HTML. Using the getElementById() method: This method gets/identifies the DOM elements using its ID an 3 min read How to check two elements are same using jQuery/JavaScript ? Given an HTML document containing two elements and the task is to check whether both elements are same or not with the help of JavaScript. Approach 1: Use is() method to check both selected elements are same or not. It takes an element as argument and check if it is equal to the other element. Examp 2 min read Like