2

Este seria el código que tengo pero no me genera ninguna alerta al momento de hacer click, lo que requiero es que al hacer click en alguno de estos me genera algun evento, he buscado por muchas paginas de internet pero no logro encontrar la respuesta a esto

muchas gracias por la ayuda.

const url = 'https://restcountries.com/v3.1/all';
fetch(url)
    .then(respuesta => respuesta.json())
        .then(datos =>  mostrardatos(datos));


        function mostrardatos (datos) {
            const body = document.querySelector('body')
           

            datos.forEach(pais => {
                const {flags:{svg},name:{common}} = pais;
                    
                    const div = document.createElement('div');
                    div.classList.add('card');
                    div.innerHTML = `
                    <h2 class="texto">${common}</h2>
                    <img src="${svg}" class="img" alt="">
                    `;
                    
                    body.appendChild(div);
                   

            });

            var img = document.querySelector('.card');
            console.log(img)
            for(var i; i < img.length; i++){
                img.addEventListener('click', hola)
                }


                function hola(){
                    alert('hola')
                }
            }
    
4
  • Intenta con img[i].addEventListener...
    – Legna
    Commented el 9 mar. 2023 a las 18:07
  • No funciona :·$ Commented el 9 mar. 2023 a las 18:09
  • La función hola ponla arriba de esa linea. Te muestra algún error la consola?
    – Legna
    Commented el 9 mar. 2023 a las 18:11
  • querySelector solo deberia traer el primer elemento, intenta con querySelectorAll.
    – Legna
    Commented el 9 mar. 2023 a las 18:12

1 respuesta 1

0

El for no esta bien estructurado y debes usar querySelectorAll para que obtenga todos los resultados.

const url = 'https://restcountries.com/v3.1/all';
fetch(url)
  .then(respuesta => respuesta.json())
  .then(datos => mostrardatos(datos));


function mostrardatos(datos) {
  const body = document.querySelector('body')


  datos.forEach(pais => {
    const {
      flags: {
        svg
      },
      name: {
        common
      }
    } = pais;

    const div = document.createElement('div');
    div.classList.add('card');
    div.innerHTML = `
                    <h2 class="texto">${common}</h2>
                    <img src="${svg}" class="img" alt="">
                    `;

    body.appendChild(div);


  });

  var img = document.querySelectorAll('div.card');

  for (let i = 0; i < img.length; i++) {
    console.log(img[i])
    img[i].addEventListener('click', () => {
      alert("Presionado")
    })
  }



}

>querySelectorAll

El método querySelectorAll() de un Element devuelve una NodeList estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores indicados.

1
  • Muchas gracias, tienes toda la razón me hacia falta inicializar la variable i Commented el 9 mar. 2023 a las 18:26

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.