In the snippet below, I'm generating random parts of a URL and that spits out an image from placeimg.com. However, I'm trying to re-run the functions that generate the different parts of the URL, so I can generate a new image on click.
I'm using this:
getNewImage.addEventListener('click', function() {
getRandomCat();
getImageId();
});
...but it's not reloading the image. Is the reload() method better here? I don't want to reload the page, I only wan to reload the image.
const imageContainer = document.querySelector('.random-image');
//categories
const categories = ['animals', 'arch', 'nature', 'people', 'tech'];
const getRandomCat = function() {
return categories[Math.floor(Math.random() * categories.length)];
}
//image id
function getImageId() {
return Math.floor(Math.random() * 1000000000000) + 1;
}
const genImg = document.createElement('img');
genImg.setAttribute('src', `https://placeimg.com/640/480/${getRandomCat()}?t=${getImageId()}`);
//image generated
console.log(`Image: ${genImg.getAttribute('src')}`);
getNewImage.addEventListener('click', function() {
getRandomCat();
getImageId();
});
imageContainer.appendChild(genImg);<button type="button" id="getNewImage">New Image</button>
<div class="random-image"></div>You're calling the two functions, but you aren't doing anything with their return values.
Just use the same code you used when setting the image's src property on page load in the click event handler.
const imageContainer = document.querySelector('.random-image');
//categories
const categories = ['animals', 'arch', 'nature', 'people', 'tech'];
const getRandomCat = function() {
return categories[Math.floor(Math.random() * categories.length)];
}
//image id
function getImageId() {
return Math.floor(Math.random() * 1000000000000) + 1;
}
const genImg = document.createElement('img');
genImg.setAttribute('src', `https://placeimg.com/640/480/${getRandomCat()}?t=${getImageId()}`);
//image generated
console.log(`Image: ${genImg.getAttribute('src')}`);
getNewImage.addEventListener('click', function() {
genImg.setAttribute('src', `https://placeimg.com/640/480/${getRandomCat()}?t=${getImageId()}`);
});
imageContainer.appendChild(genImg);<button type="button" id="getNewImage">New Image</button>
<div class="random-image"></div>Do not call the functions alone but set the src attribute of the image again, see this working snippet:
const imageContainer = document.querySelector('.random-image');
//categories
const categories = ['animals', 'arch', 'nature', 'people', 'tech'];
const getRandomCat = function() {
return categories[Math.floor(Math.random() * categories.length)];
}
//image id
function getImageId() {
return Math.floor(Math.random() * 1000000000000) + 1;
}
const genImg = document.createElement('img');
genImg.setAttribute('src', `https://placeimg.com/640/480/${getRandomCat()}?t=${getImageId()}`);
//image generated
console.log(`Image: ${genImg.getAttribute('src')}`);
getNewImage.addEventListener('click', function() {
genImg.setAttribute('src', `https://placeimg.com/640/480/${getRandomCat()}?t=${getImageId()}`);
});
imageContainer.appendChild(genImg);<button type="button" id="getNewImage">New Image</button>
<div class="random-image"></div>