0

I am creating a web app that allows users to search GIFs using the GIPHY API. I added code that is supposed to refresh the page, then load all the GIFs. 

// the Div where the GIFs from GIPHY will be appended to.
const imagesDiv = document.getElementById("imagesDiv");
// The user input -- the name of GIFs searched. Ex. Cats, Dogs, etc.
const search = document.getElementById("search");
// The search button for GIFs.
const submit = document.getElementById("submit");
// When pressed, it begins searching. 
submit.addEventListener("click", function () {
  // Refresh page first to get rid of old search results
  window.location.reload();
  getData(search.value);

});

// Code that uses GIPHY Api
function getData(query) {

  // fetch data from GIPHY, using the user's input(ex. dogs) to replace word in the link
  fetch(
    "https://api.giphy.com/v1/gifs/search?q=" +
    query +
    "&api_key=8UHgk4rc0ictTp8kMXNGHbeJAWwg19yn&limit=5"
  )
    .then(function (response) {
      return response.json();
    })
    .then(function (myJson) {
      renderData(myJson);

    });

  function renderData(data) {
    console.log(data.data);
    // For loop runs as many times as needed to get all GIFs
    for (let i = 0; i < data.data.length; i++) {
      // create img element to represent the GIFs
      const img = document.createElement("img");
      // give className for css styling
      img.className = "gifs";
      // give img url to get the GIFs
      img.src = data.data[i].images.original.url;
      // put them into a div
      imagesDiv.appendChild(img);
    }
  }

}

Instead it load then refreshes the page, removing all the GIFs before they can pop-up on screen

  • 1
    when it refreshes the page, it stops running the script, and loads the page fresh, so the script starts from the beginning again. don't refresh the page. Instead delete the old results programatically. E.g. you could use removeChild – George Sep 03 '19 at 20:17
  • Related: [Does JavaScript reload() stop the remainder of the page from being processed?](/q/8411163/4642212), [Can we have code after location.reload(true)?](/q/52192666/4642212). – Sebastian Simon Oct 21 '22 at 22:39

2 Answers2

0

When you reloading page, all of it content including scripts will be reloaded. So you asked page to reload, and after that trying to load GIFs, this code will try to load GIFs, but reload already started.

The thing you see "it load then refreshes the page" - loaded from cache GIFs, that added to page almost instantly.

You might want to update your code in a way when you just removing elements with GIFs from DOM, and adding a new one.

Instead of 

window.location.reload();

you can write:

while (imagesDiv.firstChild) {
  imagesDiv.removeChild(imagesDiv.firstChild);
}
mayakwd
  • 530
  • 3
  • 7
0

Your code end at "window.location.reload();".

Now it looks like no chance to execute "getData(search.value);".

Try this,

submit.addEventListener("click", function () {
  imagesDiv.innerHTML = "";
  getData(search.value);

});
Daehue Kim
  • 62
  • 9