How do I generate a random image from a JavaScript array of variables into my HTML document?

Question

This is what I have so far in my HTML and JavaScript pages, although I do not want to use a URL in the JavaScript file, since I have the images in my project folder. But when I open the html, no images pop up. I also do not want a background image.

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://angelinawong.com/" + randomName + "')";

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

I don't see anything wrong with the javascript part, just make sure the image url is right (these are all pointing to nowhere) and the element has some minimum width and height. — alou
– alou, Commented Sep 10, 2017 at 18:35
Other than the images not existing on those URL's, it seems to work fine — adeneo
– adeneo, Commented Sep 10, 2017 at 18:36
@adeneo don't you need also need a randomName + 1 since the image names start at 1 ? But you are right about the /img urls not working. I tried them too. — trk
– trk, Commented Sep 10, 2017 at 18:44
@82Tuskers - no, the names of the images isn't relevant, just the index in the array — adeneo
– adeneo, Commented Sep 10, 2017 at 18:51
I have all the images on a project folder, and not on a URL. I want to get rid of the "url(..." function, but I can't — Angelina
– Angelina, Commented Sep 10, 2017 at 18:56

Dan Philip Bejoy · Accepted Answer · 2017-09-10 18:57:51Z

1

Try placing the script tags after the body tag, It could be a problem with the order HTML and JS are loaded.

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

answered Sep 10, 2017 at 18:57

Dan Philip Bejoy

4,4032 gold badges20 silver badges34 bronze badges

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

2 Comments

Angelina Over a year ago

Thanks Dan! I think that was the problem. Now I'm having trouble figuring out how to generate those images, and since I don't want to use a URL, how to replace the "url" with the path of a project folder?

Dan Philip Bejoy Over a year ago

@Angelina You can use relative urls from the location where your index.html is present.

Collectives™ on Stack Overflow

How do I generate a random image from a JavaScript array of variables into my HTML document?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related