Randomized elements that change upon refresh?

[KatiePla.net]

Hi everyone!

Y'all may have seen a few previous posts of mine looking for retro ads to add to my website, and thanks to all the awesome contributions y'all have made, I have a great collection of ads I'd love to add to my site. 

As for their implementation, I'd love for them to be randomized, with a different ad showing on each refresh. I am not sure how to code this, however I'd love to learn! If anyone has any advice or direction on how to code a randomized element, I'd really appreciate it.

Thank you! 

[P_quod]

Hiya!

Well, I don't know if it would be the easiest solution for you if you're not familiar with the language, but I'd use some javascript to do what you describe.

To make it quick, I would:

- Create an array with all my images src

Code

let myArray = ["my-first-image-src", "my-second-image-src", "etc"]

- Create a function that picks a random src in that array and fills my image src with it. Something like that:

Code

function randomImg(){
let randomNumber = Math.floor(Math.random() * myArray.length);
let randomImg = myArray[randomNumber];
document.getElementById("the-id-of-my-img-div").src = randomImg;
}

- Call the function when my page loads

Code

window.onload = randomImg()

I googled "display random image onload javascript" and one of the first entries looks like it would do the job (and maybe it would offer you a better explanation than mine!)

Hope this answer will be helpful   

[xwindows]

Half a year ago, someone asked for a very similar thing; which I answered with several solutions, both server-side and client-side-- each approach outlined with detailed requirements and tested conditions. You might want to take a look.