需要刷新随机图片onclick答案

【问题标题】：Need to refresh random image onclick需要刷新随机图片onclick
【发布时间】：2021-09-01 16:37:57
【问题描述】：

我正在做一个简单的 API 调用，以便在单击按钮时在屏幕上加载随机图片。每次单击按钮时，我都希望图像刷新并显示一个新的随机图像。目前它只是不断在当前图片下方添加新图片。如何在不堆叠它们的情况下使用新的随机图片 onclick 刷新？谢谢

loadImage = (url) => {
          fetch(url)
            .then(response => response.json())
            .then(newResponse => displayData(newResponse,'dataDiv'))
        }            

        function displayData(apiResponse, divid){
            let gridDiv = document.getElementById("gridDiv");
            const imageDiv    = document.createElement("img");
            imageDiv.id = "Pic";
            imageDiv.src = apiResponse[0]['url'];
            gridDiv.appendChild(imageDiv);
        }

<div class="container py-3">
        <button type="button" class=" btn btn-success" id="Button" onclick="loadImage('https://apicall###')"
          Load Random Pictures!
        </button>
      </div>
      <div class="container"> 
            <div class="data-grid-container" id="gridDiv"></div>
      </div>

【问题讨论】：

所以删除里面的元素
stackoverflow.com/questions/3955229/…
或者只设置图片来源，不要追加
replaceChild 而不是 appendChild。
在你的 displayData 中加入一个条件，如果 gridDiv 有一个 id 为“Pic”的孩子，那么在创建新的 img 标签之前应该将其删除

标签： javascript html

【解决方案1】：

更改您的函数以删除 gridDiv 中的所有子项，然后追加：

function displayData(apiResponse, divid) {
  let gridDiv = document.getElementById("gridDiv");
  const imageDiv = document.createElement("img");
  imageDiv.id = "Pic";
  imageDiv.src = apiResponse[0]['url'];
  // added code
  while (gridDiv.firstChild) {
    gridDiv.removeChild(gridDiv.firstChild);
  }
  // end added code
  gridDiv.appendChild(imageDiv);
}

【讨论】：