Al intentar obtener innerHTML, el resultado siempre es indefinido.

Estoy generando algunos divs y agregándolos al DOM con esta función.

// Ejecutar el método forEach en newObj (gatos desde el almacenamiento local) para poblar y agregar la plantilla al DOM function getTheCats() { // Limitando los resultados a 3. Probablemente haya una mejor manera de hacer esto. newObj.slice(0, 3).forEach(cat => { const catEl = document.createElement('div') catEl.classList.add('cat-detail') catEl.innerHTML = ` <div class="img-id-container" id="pointer-control" onclick="getCatDeets()"> <img class='cat-image' src='${cat.thumbnail_url}' alt="Foto de gato"> <h3 class="id-left">Gato ${cat.id}</h3> </div> <p class="birthday-left">${cat.birthdate}</p> ` mainLeft.appendChild(catEl) }) } getTheCats()

Estoy tratando de registrar en la consola algo del innerHTML cuando hago clic en uno de los resultados.
Siempre obtengo ‘undefined’ como resultado. Sé que me falta algo, pero no logro averiguar qué. Cualquier ayuda sería muy apreciada.

function myFunction(event) { const clickedCat = event.target.nodeName; console.log(clickedCat); const details = clickedCat.innerHTML console.log(details) }

davy.ai

July 25, 2023 at 8:35 am

El problema con el código es que event.target.nodeName devuelve el nombre de la etiqueta del elemento clicado, no el elemento en sí. Por lo tanto, cuando se intenta clickedCat.innerHTML, devuelve “undefined” ya que la variable clickedCat es solo una cadena, no el elemento clicado en sí.

Para obtener el innerHTML correcto, podemos reemplazar clickedCat.innerHTML por event.target.innerHTML. Esto nos dará el innerHTML del elemento clicado y lo registrará en la consola como se espera.

function myFunction(event) {
    const clickedCat = event.target.nodeName;
    console.log(clickedCat);
    const details = event.target.innerHTML;
    console.log(details);
}

Alternativamente, en lugar de registrar en la consola, podemos actualizar la función getCatDeets para mostrar el innerHTML del elemento clicado en la interfaz de usuario. De esta manera, el usuario puede ver los detalles del gato clicado.

function getCatDeets(event) {
    const catDetails = document.getElementById("cat-details");
    catDetails.innerHTML = event.target.innerHTML;
}

En el código anterior, obtenemos el elemento cat-details y establecemos su innerHTML en el innerHTML del elemento clicado usando event.target.innerHTML. Esto mostrará los detalles del gato clicado en la interfaz de usuario.

Answer

davy.ai

July 25, 2023 at 8:35 am
El problema con el código es que event.target.nodeName devuelve el nombre de la etiqueta del elemento clicado, no el elemento en sí. Por lo tanto, cuando se intenta clickedCat.innerHTML, devuelve “undefined” ya que la variable clickedCat es solo una cadena, no el elemento clicado en sí.

Para obtener el innerHTML correcto, podemos reemplazar clickedCat.innerHTML por event.target.innerHTML. Esto nos dará el innerHTML del elemento clicado y lo registrará en la consola como se espera.
```
function myFunction(event) {
    const clickedCat = event.target.nodeName;
    console.log(clickedCat);
    const details = event.target.innerHTML;
    console.log(details);
}
```
Alternativamente, en lugar de registrar en la consola, podemos actualizar la función getCatDeets para mostrar el innerHTML del elemento clicado en la interfaz de usuario. De esta manera, el usuario puede ver los detalles del gato clicado.
```
function getCatDeets(event) {
    const catDetails = document.getElementById("cat-details");
    catDetails.innerHTML = event.target.innerHTML;
}
```
En el código anterior, obtenemos el elemento cat-details y establecemos su innerHTML en el innerHTML del elemento clicado usando event.target.innerHTML. Esto mostrará los detalles del gato clicado en la interfaz de usuario.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Al intentar obtener innerHTML, el resultado siempre es indefinido.

Answer

davy.ai