Javascript- lorem image? array

1

I am new at JS and am trying to create a random picture each time the function occurs. Right now if I use a lorem pixel my functions all have same picture. Here is my JS div code:

var div3 = document.createElement('div3');
div3.textContent = "";	
div3.setAttribute("style","background-image:url(https://loremflickr.com/320/240/beach)")
div3.setAttribute('class', 'ev-image');
div2.appendChild(div3);

I believe I have to create an array, but I am not exactly sure how to add it within this code. Any help is appreciated. Thank you!

2

Hello!
If you’re wanting to use an array, I’d recommend setting up an array of picture URLs like this

const imageURLs = 
["https://loremflickr.com/cache/resized/65535_49478430851_1c3662dcc9_320_240_nofilter.jpg",
"https://loremflickr.com/cache/resized/65535_49333032127_b497512741_320_240_nofilter.jpg"]

and then when you’re setting the background-image property, you should be able to do something like

"background-image:url(" + imageURLs[<random index>] + ")"

For generating a randomIndex, Math.floor() and Math.random() are your friends.
(Info on generating random numbers in Javascript: https://www.w3schools.com/js/js_random.asp)

Hope it helps!

3

You can use the random endpoint, look at the docs for “Multiple images on the same page”.

https://loremflickr.com/320/240?random=1

4

This worked but still has the possibility of generating two of the same image…

5

If you want to do the array method instead of using the endpoint, you can check the current random index against the last random index and run the get random index code again if they are the same.