Need to refresh random image onclick

Question

I am making a simple API call to load a random picture on screen when a button is clicked. I would like the image to refresh and show a new random image each time I click the button. Currently it just keeps adding new pictures below the current one. How can I get it to refresh with a new random picture onclick without stacking them? Thanks

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>

https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript — epascarello, Sep 01 '21 at 16:42
[`replaceChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild) instead of `appendChild`. — Andy, Sep 01 '21 at 16:43
put in your displayData a condition that if gridDiv has a child with id "Pic" then it should be removed before creating a new img tag — J_K, Sep 01 '21 at 16:44

score 0 · Answer 1 · answered Sep 01 '21 at 16:58

Change your function to remove any children in gridDiv and then append:

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

Need to refresh random image onclick

1 Answers1