Estoy escribiendo una funcionalidad simple donde necesito obtener una identificación de un elemento seleccionado. Mi JS está un poco oxidado y probablemente sea bastante obvio, pero estoy atascado. Solo puedo seleccionar la primera vez que ejecuto la función, pero parece que no funciona después de la selección inicial.
<ul id="cntyByState" class="dropdown-menu" aria-labelledby="dropState"> <li id="AZ" class="dropdown-item">Arizona</li> <li id="NM" class="dropdown-item">New Mexico</li> <li id="TX" class="dropdown-item">Texas</li> </ul> var mst = document.querySelector("#cntyByState li.dropdown-item") mst.onclick = function(){getCnts(mst)}; function getCnts(em) { console.log(em.id); }¿Qué me estoy perdiendo?
querySelector selecciona un solo nodo, intente querySelectorAll e itere la lista de nodos.
var mst = document.querySelectorAll("#cntyByState li.dropdown-item") mst.forEach(li => { li.onclick = function() { getCnts(this); }; }); function getCnts(em) { console.log(em.id); } function onClickItem() { console.log(this.id); } const dropdownItems = document.querySelectorAll("#dropdown > li"); dropdownItems.forEach((item) => item.addEventListener("click", onClickItem) ); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <ul class="dropdown" id="dropdown"> <li id="1">mango</li> <li id="2">orange</li> <li id="3">banana</li> </ul> </body> </html>Este es un ejemplo muy simple y directo que resolverá fácilmente su problema. Espero que esto funcione