Quiero que mi ventana emergente (cuando se hace clic en un botón) muestre una imagen aleatoria de mi carpeta cada vez que hago clic en el botón. Usé html, css y javascript para mi sitio web.
El problema: es la misma imagen aleatoria cada vez. Solo si reinicio la página, se muestra una imagen aleatoria diferente.
Lo que funciona en este momento: cuando hago clic en el botón de inicio, aparece una ventana emergente con una imagen aleatoria de esa carpeta (tal como la quiero), pero si hago clic en el botón de cerrar en mi imagen aleatoria y presiono el botón de inicio nuevamente, la vuelve a aparecer la misma imagen. Solo si reinicio mi página, se mostrará una nueva imagen aleatoria cuando presione el botón de inicio. Pero esa imagen permanece igual, cuando cierro la ventana emergente y quiero comenzar de nuevo.
Quiero una imagen aleatoria cada vez que presiono el botón de inicio sin tener que reiniciar la página.
¿Uso un booleano en javascript? ¿Puedo reiniciar la función por sí sola? He visto preguntas similares todo el tiempo, pero ninguna de las soluciones me ha funcionado.
(el botón de inicio también es una imagen pero es un botón) Lo siento si el código tiene un formato extraño, soy nuevo en el código <3
¡¡Gracias!!
Mi código:
HTML:
<div class="popup" id="popup-1"> <div class="overlay"> </div> <div class="content"> <img class="imagelook"/> <!-- image is start-button --> <div class="close-btn" onclick="togglePopup()" onclick="generateRandomPicture(array)">× <!-- random image from folder --> </div> </div> </div> <body> <button type="button" onclick="togglePopup()" class="imglook"></button> <!-- the start-button --> </body>JavaScript:
function togglePopup(){ document.getElementById("popup-1").classList.toggle("active"); } const imageArray =[ "zettel/9.png", "zettel/8.png", "zettel/10.png", "zettel/11.png", "zettel/12.png", "zettel/13.png" ]; const image = document.querySelector("img"); window.onload = () => generateRandomPicture(imageArray); function generateRandomPicture(array){ let randomNum = Math.floor(Math.random() * imageArray.length); image.setAttribute("src", imageArray[randomNum]); }Quizás lo siguiente podría ayudar: codificado para permitir múltiples elementos popup junto con múltiples elementos de button para activar la visualización de diferentes imágenes en el div popup respectivo
const images = [ "zettel/9.png", "zettel/8.png", "zettel/10.png", "zettel/11.png", "zettel/12.png", "zettel/13.png" ]; const _CN='active'; const bttnclickhandler=function(e){ // generate random image based upon array let imgsrc=images[mt_rand(0,images.length-1)]; // assign image the new src this.previousElementSibling.querySelector('img').src=imgsrc; this.previousElementSibling.classList.add(_CN); console.info(imgsrc) }; const closeclickhandler=function(e){ e.target.closest('.popup').classList.remove(_CN); this.previousElementSibling.src=''; console.clear(); }; // generate a random number between a & b const mt_rand=(a,b)=>Math.floor( Math.random() * ( b - a + 1 ) + a ); // assign listeners to all pertinent elements document.querySelectorAll('button.imglook').forEach(n=>n.addEventListener('click',bttnclickhandler)); document.querySelectorAll('div.close-btn').forEach(n=>n.addEventListener('click',closeclickhandler)); document.querySelectorAll('div.popup').forEach(n=>{ n.querySelector('img').src=images[mt_rand(0,images.length-1)] }) .active{background:pink} .popup{margin:1rem;} .imglook{padding:1rem} <div class="popup"> <div class="overlay"></div> <div class="content"> <img class="imagelook" /> <div class="close-btn">×</div> </div> </div> <button type="button" class="imglook"></button> <div class="popup"> <div class="overlay"></div> <div class="content"> <img class="imagelook" /> <div class="close-btn">×</div> </div> </div> <button type="button" class="imglook"></button>