代码之家 › 专栏 › 技术社区 › Millhorn

如何在点击按钮时在JS中重新运行多个函数?

javascript

Millhorn · 技术社区 · 3 年前

在下面的代码片段中,我生成了一个URL的随机部分,并从中弹出一个图像 placeimg.com .但是,我正在尝试重新运行生成URL不同部分的函数,以便在单击时生成新图像。

我用这个:

getNewImage.addEventListener('click', function() {
  getRandomCat();
  getImageId();
});

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>

2 回复 | 直到 3 年前

Spectric amamoto 3 年前

您正在调用这两个函数,但没有对它们的返回值进行任何处理。

只需使用与设置图像颜色时使用的代码相同的代码即可 src 属性的页面加载 click 事件处理程序。

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 3 年前

不要单独调用函数,而是再次设置图像的src属性,请参见以下工作片段:

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>