How show different random Image with button without restarting the page?

Question

How show different random Image with button without restarting the page?

384 views Asked by yumyum At 30 December 2021 at 18:13

i want my popup (when a button is clicked) to show a random image out of my folder each time i click the button. I used html, css and javascript for my website.

The problem: it is the same random image each time. Only if i restart the page a different random image is showed.

What works right now: when i click the start-button a popup with a random image from that folder shows up (just how i want it) but if i click the close-button on my random picture and press the start-button again the same picture pops up again. Only if i restart my page then a new random picture will show when i press the start-button. But that picture stays the same, when i close the popup and want to start it again.

I want a random image everytime when i press the start-button without having to restart the page.

Do i use a boolean in javascript? Can i restart the function on its own? I have seen similar questions all the time but none of the solutions have worked for me kinda.

(the start-button is also a picture but it is a button) Sorry if the code is weirdly formatted, i am new to code <3

Thank you!!

My code:

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)">&times; <!-- 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]);
    }

Original Q&A

There are 1 answers

**Professor Abronsius** · Answer 1 · 2021-12-30T18:38:18+00:00

Perhaps the following might help - coded to allow for multiple popup elements in conjunction with multiple button elements to trigger the display of different images in the respective popup div

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">&times;</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">&times;</div>
  </div>
</div>
<button type="button" class="imglook"></button>

TechQA.

How show different random Image with button without restarting the page?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in IMAGE

Related Questions in RANDOM

Related Questions in DIRECTORY

Popular Questions

Popular Tags

Trending Questions