How do I load a random image from an array in a JavaScript file into HTML every time the page refreshes?

Question

This is what I have so far. But when I run it, an error states that '$' was used before it was defined. Also, no images appear on screen. And I do no want to have the 'url(http://bukk.it/', since I have all the images in the project folder.

var images = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"];


$('#randomImage').css({'background-image': 'url(http://bukk.it/' + images[Math.floor(Math.random() * images.length)] + ')'});

<!DOCTYPE html>
<html>
<head><title>47</title></head>
<body>
    <div id="randomImage"/>
    
    <script type="text/js" src="popup.js"></script>
</body>
</html>

You need to include and initialize jQuery before using it. Here's a tutorial digitalocean.com/community/tutorials/an-introduction-to-jquery — djfdev
– djfdev, Commented Sep 10, 2017 at 1:00

Amit Sheen · Accepted Answer · 2017-09-10 01:10:15Z

2

Your jQuery is not defined, but you don't have to use it. This will work:

var images = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"];

var randomName = images[Math.floor(Math.random() * images.length)];

document.getElementById("randomImage").style.backgroundImage = "url('http://bukk.it/" + randomName + "')"

answered Sep 10, 2017 at 1:10

Amit Sheen

2491 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Angelina Over a year ago

Thanks Amit! And also can the images be from a folder of images in the project, instead of the "url('bukk.it"? How can I get rid of this part and still make the images work?

Amit Sheen Over a year ago

You can use "url('./path/to/image/'... And read more about HTML File Paths.

Angelina Over a year ago

And is it possible to do this with local folders within the project?

Angelina Over a year ago

I am still a bit confused. This is for a Chrome extension I'm building where images from a folder are generated every time the extension is clicked, but nothing shows up except an empty box

Amit Sheen Over a year ago

Yes. And again, read about HTML File Paths: w3schools.com/html/html_filepaths.asp The answers to your questions are there

Collectives™ on Stack Overflow

How do I load a random image from an array in a JavaScript file into HTML every time the page refreshes?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related