点击按钮刷新随机图片避免堆叠的前端实现问题

问题原因 #

你当前的displayData函数每次执行都会创建新的<img>元素，通过appendChild方法追加到gridDiv容器末尾，所以每次点击都会新增一张图片而不是替换原有内容。

解决方法 #

提供两种常用实现方案，按需选择即可：

方案1：插入新图片前清空容器内容 #

只需要修改displayData函数，在插入新图片前清空gridDiv的原有子元素：

function displayData(apiResponse, divid){
    let gridDiv = document.getElementById("gridDiv");
    // 清空容器内所有现有内容
    gridDiv.innerHTML = '';
    const imageDiv = document.createElement("img");
    imageDiv.id = "Pic";
    imageDiv.src = apiResponse[0]['url'];
    gridDiv.appendChild(imageDiv);
}

方案2：提前预留img标签，直接修改src属性（性能更优） #

不需要重复创建DOM元素，直接修改已有图片的资源地址即可：

• 第一步：修改HTML，在gridDiv里预先放好img标签

<div class="container"> 
    <div class="data-grid-container" id="gridDiv">
        <!-- 提前预留img标签，初始可以不写src或者放占位图 -->
        <img id="Pic" alt="随机图片">
    </div>
</div>

• 第二步：修改JS的displayData函数，直接修改src

function displayData(apiResponse, divid){
    // 直接获取已有的img元素修改地址即可，不需要新建和追加
    const imageDiv = document.getElementById("Pic");
    imageDiv.src = apiResponse[0]['url'];
}

另外你现有HTML代码里的按钮标签少了闭合的>，可以顺手修正：

<button type="button" class=" btn btn-success" id="Button" onclick="loadImage('https://apicall###')">
  Load Random Pictures!
</button>

内容的提问来源于stack exchange，提问作者JGeho