En el fragmento a continuación, estoy generando partes aleatorias de una URL y eso arroja una imagen de placeimg.com . Sin embargo, estoy tratando de volver a ejecutar las funciones que generan las diferentes partes de la URL, para poder generar una nueva imagen al hacer clic.
estoy usando esto:
getNewImage.addEventListener('click', function() { getRandomCat(); getImageId(); });... pero no está recargando la imagen. ¿Es mejor aquí el método reload()? No quiero recargar la página, solo quiero recargar la imagen.
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>Está llamando a las dos funciones, pero no está haciendo nada con sus valores de retorno.
Simplemente use el mismo código que usó al configurar la propiedad src de la imagen en la carga de la página en el controlador de eventos de 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>No llame a las funciones solo, pero establezca el atributo src de la imagen nuevamente, vea este fragmento de código de trabajo:
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>