How do I get my fetch call to return a photo in the same spot/size?

user_15286252 0
Viewed 118

I'm a full stack dev student, I have an event listener, that includes a fetch call in Javascript, but the gifs being returned are each in their own response container. Each time I click the button, a new image container is created. How do I fix it so that the gifs only appear in the same container? I also want to display a random flow of photos when my buttons are clicked, not just one. Any help is appreciated.

Here's my code for the first two buttons.

window.addEventListener('fetch', function (event) {
  console.log("fetch add event listener");
});

natureBtn.addEventListener('click', function (event) {
  fetch(
    'https://api.giphy.com/v1/gifs/random?api_key=MY_API_KEY&rating=g&tag=nature'
  )
    // Convert the response to JSON
    .then(function (response) {
      return response.json();
    })
    .then(function (response) {
      // Use 'querySelector' to get the ID of where the GIF will be displayed
      var responseContainerEl = document.querySelector('#response-container');
      // Create an '<img>' element
      var gifImg = document.createElement('img');
      // Set that element's 'src' attribute to the 'image_url' from our Giphy API response
      gifImg.setAttribute('src', response.data.image_url);
      // Append the '<img>' element to the page
      responseContainerEl.appendChild(gifImg);
    });
   

  });

  sportsBtn.addEventListener('click', function (event) {
    fetch(
      'https://api.giphy.com/v1/gifs/random?api_key=MY_API_KEY&rating=g&tag=sports'
    )
      // Convert the response to JSON
      .then(function (response) {
        return response.json();
      })
      .then(function (response) {
        // Use 'querySelector' to get the ID of where the GIF will be displayed
        var responseContainerEl = document.querySelector('#response-container');
        // Create an '<img>' element
        var gifImg = document.createElement('img');
     
        // Set that element's 'src' attribute to the 'image_url' from our Giphy API response
        gifImg.setAttribute('src', response.data.image_url);
        // Append the '<img>' element to the page
        responseContainerEl.appendChild(gifImg);
      });
     
  
    });
fetch javascript
1 Answers

Well, you are appending the <img> tag inside the container(guessing a div) with id "response-container" each time the button is getting clicked. So, you are getting the multiple <img> from the fetch each time you click.

So, remove the line

 responseContainerEl.appendChild(gifImg);

You can use any of the 3 methods based on your needs

  1. Use replaceChild() instead of appendChild() but that would require you to create a <img> tag at the starting and then replacing it with replaceChild method.

  2. You can create a <img> tag using javascript before calling the fetch and then after you get the fetch data update the src like below.

  3. Create a <img> tag with an id in html and then use that id to update the image whenever you click on the button and it will fetch different data and update the src based of the data.

For 2 and 3 update the src property each time you click the button making a request to the api and updating the src. Since, you have used random in api call it should provide you different src everytime you call it.

document.getElementById('image').src = 'http://yourImagePathHere';

Also, remember to wait for the fetch api call to complete before setting the src using async and await syntax in the promises.

user_84050850
Related