Question

我正在创建一个Web应用程序，允许用户使用GIPHY API搜索GIF。我添加了应该刷新页面的代码，然后加载了所有GIF。

// 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);
    }
  }

}

相反，它加载后刷新页面，删除所有GIF，然后它们才能在屏幕上弹出

Answer 1

重新加载页面时，所有页面内容（包括脚本）都将重新加载。因此，您要求页面重新加载，然后尝试加载GIF，此代码将尝试加载GIF，但是重新加载已经开始。

您看到的“加载然后刷新页面”的内容-从缓存GIF加载，几乎立即添加到页面中。

当您仅从DOM中删除带有GIF的元素并添加新元素时，您可能希望以某种方式更新代码。

代替

window.location.reload();

您可以写：

while (imagesDiv.firstChild) {
  imagesDiv.removeChild(imagesDiv.firstChild);
}

Answer 2

您的代码在“ window.location.reload（）;”处结束。

现在看来没有机会执行“ getData（search.value）;”。

尝试一下

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

});

为什么刷新后内容不显示

2 个答案: