He creado una función para crear una imagen de un oso, pero solo quiero una imagen a la vez. Hay un botón que está reiniciando la otra API que tengo pero no esta. ¿Alguna ayuda o sugerencia?
const numImagesAvailable = 145 //how many photos are total in the collection const numItemsToGenerate = 1; //how many photos you want to display const imageWidth = 360; //image width in pixels const imageHeight = 360; //image height in pixels const collectionID = 9396519 //Bears, the collection ID from the original url const galleryContainer = document.querySelector('#gallery-item') function renderGalleryItem(randomNumber) { fetch(`https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/?sig=${randomNumber}`).then(function(response) { console.log(response) let galleryItem = document.createElement('img'); galleryItem.className = "center-bear"; galleryItem.setAttribute("src", `${response.url}`) document.body.append(galleryItem) }) } for (let i = 0; i < numItemsToGenerate; i++) { } buttonEl.addEventListener("click", function(event) { event.preventDefault(); listItemEl.remove(); callapi(); let randomImageIndex = Math.floor(Math.random() * numImagesAvailable); renderGalleryItem(randomImageIndex); }); <div id="gallery-item"></div> const numImagesAvailable = 145; //how many photos are total in the collection const numItemsToGenerate = 2; //how many photos you want to display const imageWidth = 360; //image width in pixels const imageHeight = 360; //image height in pixels const collectionID = 9396519; //Bears, the collection ID from the original url const urlPrefix = `https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/`; const galleryContainer = document.querySelector("#gallery-item"); const button = document.querySelector("#img-getter"); function renderGalleryItem(index) { const url = `${urlPrefix}?${index}`; fetch(url).then(function (response) { const img = document.createElement("img"); img.className = "center-bear"; img.setAttribute("src", `${response.url}`); galleryContainer.append(img); }); } button.addEventListener("click", function (event) { // remove old images galleryContainer.replaceChildren(); // get new images for (let i = 0; i < numItemsToGenerate; i++) { const index = Math.floor(Math.random() * numImagesAvailable); renderGalleryItem(index); } }); <button id="img-getter">Click</button> <div id="gallery-item"></div>