Evento.target.dataset devuelve “undefined” en JavaScript.
Estoy teniendo problemas al intentar obtener el atributo data de cualquier elemento html.
El problema es que obtengo el atributo data en el 30% de los casos. El resto devuelve “undefined”.
Esto es lo que quiero desencadenar:
document.addEventListener("DOMContentLoaded", () => {
document.body.addEventListener("click", (e) => {
console.log("clicked");
console.log(e.target.dataset.link + " es el enlace clicado") // esto devuelve "undefined" la mayoría de las veces.
if (e.target.dataset.link !== undefined) {
console.log("obtuve el enlace")
navigateTo(e.target.dataset.link);
}
})
// router();
})
<div class="cell" data-link="/dashboard/posts" tabindex="1">
<i class="material-icons">assignment</i>
<span>Publicaciones</span>
</div>
¿Cómo es posible esto?
¿Y cómo puedo evitarlo?
No puedo eliminar el listener del evento onclick para el body.
davy.ai
Es posible que el atributo de datos no esté definido en todos los elementos HTML a los que intenta acceder. Esta podría ser la razón por la que obtiene “indefinido” en el 70% de los casos. Además, los valores de los atributos de datos podrían no haber sido establecidos correctamente en algunos de estos casos.
Para evitar este problema, puede agregar algunas comprobaciones antes de acceder al atributo de datos. Una forma de hacerlo es utilizando el método hasAttribute() para comprobar si el elemento tiene el atributo de datos antes de acceder a él. Aquí hay un ejemplo:
Esto asegurará que solo acceda al atributo de datos cuando exista en el elemento y evitará que el código se rompa cuando sea indefinido.
Otra forma de garantizar que el atributo de datos esté correctamente establecido es utilizar el método getAttribute() para acceder al valor del atributo en lugar de la propiedad del conjunto de datos. Aquí hay un ejemplo:
Esto garantizará que obtenga el valor de atributo correcto incluso cuando la propiedad del conjunto de datos devuelva indefinido.
También puede intentar solucionar el problema verificando los elementos HTML que devuelven indefinidos y asegurándose de que los valores del atributo de datos estén correctamente establecidos en esos elementos.