Output an array of images in JavaScript

Question

I'm new to JavaScript and I made this code. The purpose of this code is to use JavaScript and HTML to display an ARRAY of images in a website. They all need to be displayed at once. This is the code so far, however it is not working.

<html>
<head>
<script>
        var ArrayOfImages = [];

        var Image1 = new Image1()
        image1.src = "image1.jpg";

        var Image2 = new Image2()
        Image2.src = "image2.jpg";

        var Image2 = new Image3()
        Image3.src = "image3.jpg";

        ArrayOfImages.push(Image1);
        ArrayOfImages.push(Image2);
        ArrayOfImages.push(Image3);
        ArrayOfImages.toString();
        document.write(ArrayOfImages);
</script>
</head>
<body>
</body>
</html>

When I run this code all I get is an empty webpage.

For anyone wondering, the images are in the same file as the html file. I'm also relatively new to JavaScript and HTML so please be clear in how to fix it.

They should all be `new Image()` and you need to append them to the body element. `Document.Write()` is for writing strings to the body. Look at [this question](http://stackoverflow.com/questions/2735881/adding-images-to-the-html-with-javascript) for the help you need. — Reinstate Monica Cellio, Feb 19 '17 at 13:03
I have no idea what you mean by that. I got parts of the code off websites that help people with javascript. I used those Images1,2,3 cuz they are the name of the variables. Sorry if i wasnt much help to you. — A.Ridley, Feb 19 '17 at 13:05
You have to use `document.createElement('image')` in order to create a new image DOM element. — Mihai Alexandru-Ionut, Feb 19 '17 at 13:06
@A.Ridley There are a lot of bad and/or outdated JS learning resources out there. Just because it is on a website (or even in a book) doesn't mean it is teaching you good coding practice. There are a number of bad habits displayed in that code, capitalizing non-constructor functions, using `document.write`, etc. You might benefit from a article I just published, [Spotting bad JavaScript tutorials](http://www.uselesscode.org/blog/posts/spotting-bad-javascript-tutorials/). — Useless Code, Feb 19 '17 at 15:47

score 3 · Accepted Answer · edited Feb 19 '17 at 13:23

3

You have to use array.forEach then append each array item in body.Like this

var ArrayOfImages = ['image1.jpg', 'image2.jpg', 'image3.jpg']; //your assumed array
ArrayOfImages.forEach(function(image) {    // for each link l in ArrayOfImages
  var img = document.createElement('img'); // create an img element
  img.src = image;                         // set its src to the link l
  document.body.appendChild(img);          // append it to the body 
});

See Fiddle: Fiddle

UPDATE

You can also set height and width as your requirement.Like below.

var ArrayOfImages = ['https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg']; //your assumed array
ArrayOfImages.forEach(function(image) {
  var img = document.createElement('img');
  img.src = image;
  img.height = "45";
  img.width = "50";
  document.body.appendChild(img);
});

edited Feb 19 '17 at 13:23

ibrahim mahrir

31,174
5
48
73

answered Feb 19 '17 at 13:05

Hikmat Sijapati

6,869
1
9
19

i copied what you did, and i still get an empty page. This is my code now. – A.Ridley Feb 19 '17 at 13:08
– A.Ridley Feb 19 '17 at 13:08
define proper path of your images. – Hikmat Sijapati Feb 19 '17 at 13:09
the images are all in a file with the HTML document. They are called "image1" and "image2" and "image3" – A.Ridley Feb 19 '17 at 13:10
@A.Ridley The script may be generating an error that the `document.body` doesn't exist yet. One option to resolve that is to move the ` – Jonathan Lonowski Feb 19 '17 at 13:10
ok i tried what you said. The images are in the website now, however they are not loading up. Seems the code works but the images seem to be the problem. – A.Ridley Feb 19 '17 at 13:13
@ Jonathan Lonowski you are right.See in updated answer.It will works. – Hikmat Sijapati Feb 19 '17 at 13:17
they work now. However can you explain to me how and what these lines of code are, i want to make sure i know what i am doing before i move on. – A.Ridley Feb 19 '17 at 13:18
ArrayOfImages.forEach(function(image){ – A.Ridley Feb 19 '17 at 13:18
document.body.appendChild(img); – A.Ridley Feb 19 '17 at 13:19
Ya it is easy.I have edited answer just saying something that how it works. – Hikmat Sijapati Feb 19 '17 at 13:20
1

@ARidley it's because you are not defining a width or height. That's why you see nothing on the page. You have to set those as is done in the answer, and I don't see it in the code you shared. I know this answer comes very late, but it's also for those that may see this thread now (or later). – Maria Campbell Jan 31 '20 at 12:42

Output an array of images in JavaScript

1 Answers1

Linked