0

我已经看到了几个相同的问题，但我似乎无法正确回答。我想通过单击按钮生成一个新的 GIF。我通过单击按钮生成了一个 GIF。问题是当我再次单击该按钮时，它会添加另一个 GIF 而不是替换前一个。

这是我现在的代码：

HTML 按钮

        <form>
          <button
            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"
            type="button"
            id="btnGIF" 
            style="display: inline; 
            transition: all 0.15s ease 0s; 
            text-align: center; 
            width: 50%;
            z-index:1;
            position: relative; 
            padding: 3%;">Generate GIF
          </button>
      </form>

这是我拥有的 JavaScript 代码：

document.addEventListener("DOMContentLoaded", init);
  function init() {
    document.getElementById("btnGIF").addEventListener("click", ev => {
        let APIKEY = "Dsuxat5V1ccrtvIIBdrxk731WPrSs22l";
        let RandomNumber = Math.floor(Math.random() * (100 - 1) + 1);
        ev.preventDefault(); 
        let url = `https://api.giphy.com/v1/gifs/search?api_key=${APIKEY}&limit=100&q=thankyou&offset=${RandomNumber}`;
        console.log(APIKEY)
        console.log(url);
        //var image_x = document.getElementsByClassName('out').classList.length;
        //console.log(image_x);
        //if (image_x > 0){
        //    PrevImage = document.getElementsByClassName('out')
        //    PrevImage[0].parentNode.removeChild(PrevImage[0]);
        //    }
        fetch(url)
        .then(response => response.json())
        .then(content => {
        console.log(content.data);
        console.log('META', content.meta);
        let fig = document.createElement("figure");
        let img = document.createElement("img");
        img.src = content.data[0].images.downsized.url;
        img.alt = content.data[0].title;
        fig.appendChild(img);
        let out = document.querySelector(".out");
        out.insertAdjacentElement("afterbegin", fig);
            })
        .catch(err => {
            console.error(err);
        })
    });
}

我确实看到我正在附加新的 gif 而不是替换它。我只是找不到替换它的方法（我刚开始学习 JavaScript）。

有人可以帮助我吗？

4

1 回答 1

0

您必须从要附加的 html 元素中删除前一个 gif，在这种情况下，它是具有类“out”的元素。一个简单的方法是在添加新元素之前清除该类中的所有子元素。下面的代码段会将“out”类的子级的 HTML 设置为空白。

document.querySelector(".out").innerHTML = ""

您可以将此行放在设置 api 键的正上方，即单击侦听器中的第一行。此外，最好不要在堆栈溢出时发布您的 api 密钥。最好在这里留空。

于 2022-02-25T14:41:34.653 回答