{"id":7334,"date":"2022-09-08T04:36:15","date_gmt":"2022-09-07T23:06:15","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/"},"modified":"2022-09-08T04:36:15","modified_gmt":"2022-09-07T23:06:15","slug":"solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/","title":{"rendered":"[Solved] How trigger an event individually to different instances of the same id [duplicate]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n
\n

Warning: Your problem here is that XHTML standards do not allow multiple elements with the same ID. This is simply not allows in XML, XHTML, or HTML 5. This is not just bad practice, but code which will most likely break in production as your application gets larger and less maintainable.<\/strong><\/p>\n<\/blockquote>\n

\n

Solution 1: Use Classes<\/h2>\n

If you are using the same ID so that you can style the elements the same way, then you should be using classes:<\/p>\n

<li class=\"color\" id=\"red\">Red<\/li>\n<li class=\"color\" id=\"blue\">Blue<\/li>\n<li class=\"color\" id=\"green\">Green<\/li>\n<\/code><\/pre>\n
\n
Solution 2: Use querySelectorAll<\/code><\/h2>\n
Using document.getElementById<\/code> will target only the first element with the specified ID (reference the warning above).<\/p>\n
If you still insist on having multiple elements with the same ID, then there is one solution left (although proceed with caution).<\/p>\n
document.querySelectorAll<\/code> will accept a query selector (similar to CSS selectors) as a parameter and find all elements which match the provided query selector. So document.querySelectorAll('li')<\/code> will return a NodeList<\/code> (similar to an array) of <li \/><\/code> elements. You can use the same function to grab all the elements with id=\"color\"<\/code>:<\/p>\n
const colors = Array.from(document.querySelectorAll('#color'));\n\ncolors.forEach(listItem => {\n    const color = listItem.textContent.toUpperCase();\n\n    listItem.addEventListener('click', () => {\n        alert(`You clicked on ${color}`);\n    });\n});\n\n<\/code><\/pre>\n
You can checkout this codepen for a demo: https:\/\/codepen.io\/virajshah21\/pen\/gOvvqEj<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved How trigger an event individually to different instances of the same id [duplicate] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] Warning: Your problem here is that XHTML standards do not allow multiple elements with the same ID. This is simply not allows in XML, XHTML, or HTML 5. This is not just bad practice, but code which will most likely break in production as your application gets larger and less maintainable. Solution 1: Use … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,413,333],"class_list":["post-7334","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-function","tag-javascript"],"yoast_head":"\n[Solved] How trigger an event individually to different instances of the same id [duplicate] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How trigger an event individually to different instances of the same id [duplicate] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Warning: Your problem here is that XHTML standards do not allow multiple elements with the same ID. This is simply not allows in XML, XHTML, or HTML 5. This is not just bad practice, but code which will most likely break in production as your application gets larger and less maintainable. Solution 1: Use ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-07T23:06:15+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How trigger an event individually to different instances of the same id [duplicate]\",\"datePublished\":\"2022-09-07T23:06:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\\\/\"},\"wordCount\":203,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"css\",\"function\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\\\/\",\"name\":\"[Solved] How trigger an event individually to different instances of the same id [duplicate] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-09-07T23:06:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How trigger an event individually to different instances of the same id [duplicate]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How trigger an event individually to different instances of the same id [duplicate] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How trigger an event individually to different instances of the same id [duplicate] - JassWeb","og_description":"[ad_1] Warning: Your problem here is that XHTML standards do not allow multiple elements with the same ID. This is simply not allows in XML, XHTML, or HTML 5. This is not just bad practice, but code which will most likely break in production as your application gets larger and less maintainable. Solution 1: Use ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/","og_site_name":"JassWeb","article_published_time":"2022-09-07T23:06:15+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How trigger an event individually to different instances of the same id [duplicate]","datePublished":"2022-09-07T23:06:15+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/"},"wordCount":203,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","function","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/","url":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/","name":"[Solved] How trigger an event individually to different instances of the same id [duplicate] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-07T23:06:15+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-trigger-an-event-individually-to-different-instances-of-the-same-id-duplicate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How trigger an event individually to different instances of the same id [duplicate]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/7334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=7334"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/7334\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=7334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=7334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=7334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}