1

Al intentar obtener el valor del elemento seleccionado mediante el for y el evento este devuelve siempre undefined y queremos el valor solucitado mediante this ejemplo this.innerHTML. el cual devuelve undefined el problema es que se usa funcion flecha y no normal. Mas abajo esta la solucion

let div = document.getElementsByClassName('div')


for(i = 0; i < div.length; i++){
  div[i].addEventListener('click', ()=>{
     alert(this.innerHTML);
  });
}
.div{
  padding: 5px;
  background: aqua;
  text-align: center;
  color: #333
}
.div:hover{
  background: #333;
  color: aqua
}
<html>
  <head>
  
    <title>this.innerHTML</title>
    
  </head>
  <body>
    <div class="div">Hola mundo</div>
    <div class="div">Todos</div>
    <div class="div">Devolvera undefined</div>
  </body>
</html>

2 respuestas 2

4

Esto ocurre porque se utiliza una funcion flecha y esta en el this no nos da el parametro tanto innerHTML como value, title, etc. La forma de arreglarlo es simple. Solo cambiamos la funcion flecha por una funcion normal.

let div = document.getElementsByClassName('div')


for(i = 0; i < div.length; i++){
//Solo cambiamos ()=>{} por function(){}
  div[i].addEventListener('click', function(){
     alert(this.innerHTML);
  });
}
.div{
  padding: 5px;
  background: aqua;
  text-align: center;
  color: #333
}
.div:hover{
  background: #333;
  color: aqua
}
<html>
  <head>
  
    <title>this.innerHTML</title>
    
  </head>
  <body>
    <div class="div">Hola mundo</div>
    <div class="div">Todos</div>
    <div class="div">Devolveran su valor</div>
  </body>
</html>

0
1

Caso 1

Si hacemos un console.log de this en el contexto de una función regular en JS obtendremos esto:

[object HTMLDivElement] {
  accessKey: "",
  addEventListener: function addEventListener() { [native code] },

Dado lo cual será valido que accedas al texto de cada div con la instrucción:

this.innerHTML

Caso 2

Sin embargo cuando hacemos un console.log de this en el contexto de una arrow function la salida sería como esta:

[object Window] {
  addEventListener: function addEventListener() { [native code] },

Donde notamos que entre las 2 existe diferencia del contexto de ejecución, por eso cuando intentas acceder a la propiedad innerHTML te da undefined ya que son contextos distintos.

Propongo

  • que para evitar el ciclo for, envuelvas los 3 div en uno superior o padre
  • Vigiles el evento en la etiqueta padre y a partir de ahi determines quien de los elementos internos lo desencadeno leyendolo a través de su clase que sería div

    <html>
      <head>
      
        <title>this.innerHTML</title>
        
      </head>
      <body>
        <div class="contenedor">
          <div class="div">Hola mundo</div>
          <div class="div">Todos</div>
          <div class="div">Devolvera undefined</div>
        </div>
        <script>
          let divs = document.querySelector(".contenedor")
          
          divs.addEventListener("click", (evento) => {
            if (evento.target.classList.contains("div")) {
              alert(evento.target.innerText)
            }
          })
        </script>
      </body>
    </html>

EDICIÓN

Usando el método getAttribute()

El método getAttribute() se puede aplicar en este contexto para extrer atributos como:

  • id
  • class

A través de la siguiente sintaxis:

evento.target.getAttribute("atributo-deseado")

Usando la sintaxis de evento.target.atributo

Sin embargo en este punto el acceso a los atributos de cada nodo se hace mas simple a través de la sintaxis de:

evento.target.atributo

Y los nombres de los atributos serían:

  • id
  • className

De hecho con esta última si imprimes así:

console.log(evento.target)

Podrás ver entre una gran cantidad de resultados, aquellos atributos que buscamos:

.............
id: "uno"
.............
className: "div"
.............
.............
.............
.............
2
  • Me parecio super bien la forma que propones sin embargo tengo una duda ¿Puedes acceder tambien a los atributos? mediante .getAttribute?
    – Jhon
    Commented el 26 may. 2020 a las 23:29
  • Te lo agradeceria @BetaM
    – Jhon
    Commented el 27 may. 2020 a las 3:12

Tu Respuesta

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

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