I have created a function to create a bear picture but I only want one image at a time. There is a button that is resetting the other API I have but not this one. Any help or suggestions?
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>