0

me encuentro realizando una función que hace la delegación de eventos y me recibe ciertos parámetros de los cuales quiero que me muestre el valor de su atributo DATA del elemento HTML

Les voy a enseñar mi código

HTML

<a class="delete" data-delete="1">Delete</a>
<a class="delete" data-delete="2">Delete</a>
<a class="delete" data-delete="3">Delete</a>
<a class="delete" data-delete="4">Delete</a>
<a class="delete" data-delete="5">Delete</a>

jAVASCRIPT

function delegacionEvento(elemento, atributo, valorAtributo) {
    elemento.addEventListener('click', e => {
        //OBTENER EL ATRIBUTO DE CLASS Y QUE SEA IGUAL A 'delete'
        if (e.target.getAttribute(atributo) == valorAtributo) {
                //GUARDAR EL VALOR DEL ATRIBUTO DATA EN LA VARIABLE
                var valor = e.target.dataset.Valoratributo;
                console.log(valor); //Respuesta undefined
        }//End if
    });
}//End método delegacionEvento

Y así llamo la función pasandole los parámetros

delegacionEvento(loadSong, 'class', 'delete');

El resultado que obtengo es undefined

Alguien me podría ayudar a resolver mi problema. Gracias

3
  • El parámetro loadSong a que hace referencia? el 19 feb. 2020 a las 17:04
  • @para obtener el atributo deberías utilizar data-delete en vez de delete saludos el 19 feb. 2020 a las 17:11
  • Hola victor el parámetro loadSong es el elemento padre que contiene el bloque que están los <a> el 19 feb. 2020 a las 19:54

2 respuestas 2

1

Necesitas usar corchetes [] para llamar al atributo. Ademas tenias un typo en valorAtributo. Quedaria asi:

function delegacionEvento(elemento, atributo, valorAtributo) {
    elemento.addEventListener('click', e => {
        //OBTENER EL ATRIBUTO DE CLASS Y QUE SEA IGUAL A 'delete'
        if (e.target.getAttribute(atributo) == valorAtributo) {
                //GUARDAR EL VALOR DEL ATRIBUTO DATA EN LA VARIABLE
                var valor = e.target.dataset[valorAtributo];
                console.log(valor); //Respuesta undefined
        }//End if
    });
}//End método delegacionEvento

var loadSong = document.getElementsByClassName('delete')[0];

delegacionEvento(loadSong, 'class', 'delete');
<a class="delete" data-delete="1">Delete</a>
<a class="delete" data-delete="2">Delete</a>
<a class="delete" data-delete="3">Delete</a>
<a class="delete" data-delete="4">Delete</a>
<a class="delete" data-delete="5">Delete</a>

1
  • 1
    Muchar gracias Alan, por tu respuesta, la tendré en cuenta. el 19 feb. 2020 a las 20:03
1

Al utilizar dataset te arroja un objeto y tienes que entrar a su valor por medio de la clave utilizando [], además de que estás pasando mal el parámetro valorAtributo, cuálquier duda hazla saber.

function delegacionEvento(elemento, atributo, valorAtributo) {
    elemento.addEventListener('click', e => {
        //OBTENER EL ATRIBUTO DE CLASS Y QUE SEA IGUAL A 'delete'
        console.log(e.target.getAttribute(atributo))
        if (e.target.getAttribute(atributo) == valorAtributo) {
                //GUARDAR EL VALOR DEL ATRIBUTO DATA EN LA VARIABLE
                console.log(e.target.dataset[valorAtributo]);
                //var valor = e.target.dataset.valorAtributo;
                var valor = e.target.dataset[valorAtributo];
                console.log(valor); //Respuesta undefined
        }//End if
    });
}

delegacionEvento(document.querySelectorAll('a')[0],'class', 'delete');
<a class="delete" data-delete="1">Delete</a>
<a class="delete" data-delete="2">Delete</a>
<a class="delete" data-delete="3">Delete</a>
<a class="delete" data-delete="4">Delete</a>
<a class="delete" data-delete="5">Delete</a>

1
  • 1
    Muchas gracias por tu respuesta, esa fue mi solución abrir los corchetes y pasar ValorAtributo el 19 feb. 2020 a las 19:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.