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

Question

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>

Replace the src attribute on the image?

Dave Newton
– Dave Newton

2022-05-06 23:15:21 +00:00
Commented May 6, 2022 at 23:15 — Dave Newton
– Dave Newton, Commented May 6, 2022 at 23:15
Replace it with what?

Millhorn
– Millhorn

2022-05-06 23:17:52 +00:00
Commented May 6, 2022 at 23:17 — Millhorn
– Millhorn, Commented May 6, 2022 at 23:17

Spectric · Accepted Answer · 2022-05-06 23:22:59Z

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>

Tin Stribor Sohn · Accepted Answer · 2022-05-06 23:25:07Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related