0

Mi proyecto utiliza la API de Giphy, consiste en realizar una búsqueda mediante un input y mostrar los resultados de gifs mediante DOM en el index. Cuando quiero realizar otra búsqueda, la anterior no se borra y la nueva se suma. Cómo puedo solucionar esto?

Dejo mi código:

window.onload = function () {
  let buscarBtn = document.querySelector(".search-button");

  buscarBtn.addEventListener("click", () => {
    function accederABusquedas() {
      const apiKey = "XXX-XXX-XXX-XXX";
      const search = document.getElementById("searchinput").value;
      console.log(search);

      fetch(
        "http://api.giphy.com/v1/gifs/search?q=" + search + "&api_key=" + apiKey
      )
        .then((response) => response.json())
        .then((gif) => {
          buscarGifs(gif);
        });
    }
    accederABusquedas();
  });

  function buscarGifs(gif) {
    for (let index = 0; index < gif.data.length; index++) {
      let cont = document.createElement("div");
      let search = document.getElementById("container-search");

      let trend = document.getElementById("container-trending");

      search.appendChild(cont);
      var img = document.createElement("img");
      cont.appendChild(img);
      var url = gif.data[index].images.downsized.url;
      img.setAttribute("src", url);
      img.setAttribute("width", "298px");
      img.setAttribute("height", "288px");

      trend.style.display = "none";
    }
  }
};
5
  • Cuantas vecez se ejecuta el console.log() en tu código?, si al darle click al boton de busqueda, se ejecuta mas de una vez, definitivamente hay algo que esta mal... pero si no, es algo muy extraño...
    – Layer
    Commented el 4 abr. 2020 a las 21:55
  • Se ejecuta una vez, lo hice para checkear que lo ingresado en el input se guarde. Qué vendría a ser lo extraño? tal vez no entendí tu pregunta.
    – Agostina
    Commented el 4 abr. 2020 a las 22:06
  • Pero quiere decir que al hacer la segunda o tercera busqueda, algunos giffs se repiten?, o no se repiten?
    – Layer
    Commented el 4 abr. 2020 a las 22:14
  • No se repiten. Por ejemplo, en el input pongo 'beatles' y me trae 25 gifs de beatles. Cuando vuelvo a ingresar otro valor, por ej 'star wars', esos 25 gifs que me trajo anteriormente, en lugar de reemplazarlos con los de star wars, los nuevos se colocan debajo de los de beatles, sumandose ambas búsquedas. Yo quiero que cada vez que ingrese un nuevo valor en el input, el resultado anterior se borre y aparezcan en le dom los nuevos.
    – Agostina
    Commented el 4 abr. 2020 a las 22:27
  • Ah vale @Agostina entonces creo que mi solución si te funcionaria, si es que la digite bien, espero te sirva, te invito a probarla a ver que tal, espero te sirva ;3.
    – Layer
    Commented el 4 abr. 2020 a las 22:29

1 respuesta 1

0

Creo que hay una pequeña confusión al respecto con la pregunta... si no me equivoco y lo que creo que es el problema es lo que pienso que es, entonces la pregunta sería: 'Como eliminar elementos en javascript', y no 'Cómo resetear una búsqueda en Javascript'.

Si lo que ocurre es que al hacer la nueva busqueda deseas que los elementos anteriores con los cuales habías hecho la busqueda desaparezcan, entonces el problema no es la busqueda en sí, si no que no estas eliminando los anteriores elementos cuando hiciste la busqueda de los gif, es decir, los buscaste y los añadiste pero luego al realizar la siguiente busqueda, no los destruiste.

Una forma sencilla de resolver esto es simplemente destruir los anteriores antes de hacer una nueva busqueda:

function accederABusquedas(){

    const containerSearch = document.getElementById("container-search");
    const elementosADestruir = document.querySelectorAll("#container-search div");

    for(let elementoADestruir of elementosADestruir){
        containerSearch.removeChild(elementoADestruir);
    }

    const apiKey = "XXX-XXX-XXX-XXX";
    const search = document.getElementById("searchinput").value;
    console.log(search)

   fetch('http://api.giphy.com/v1/gifs/search?q=' + search + '&api_key=' + apiKey)
   .then(response => response.json())
   .then(gif => {
        buscarGifs(gif);

    })
}

//Ejecutar lo demas
1
  • 1
    SII!! Perfecto, era este mi problema. Ya funciona, voy a cambiar el título de la pregunta. Muchisimas gracias Riven!
    – Agostina
    Commented el 4 abr. 2020 a las 22:31

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.