CODEWITHSUNDEEP
javascript
Millhorn
Millhorn

Reputation: 3176

How to re-run multiple functions in JS on button click?

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>

Upvotes: 0

Views: 48

Answers (2)

Tin Stribor Sohn
Tin Stribor Sohn

Reputation: 204

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>

Upvotes: 1

Spectric
Spectric

Reputation: 32002

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>

Upvotes: 1

Related Questions