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.
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.
Share Improve this question edited Feb 19, 2017 at 13:16 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Feb 19, 2017 at 13:00 A.RidleyA.Ridley 631 gold badge1 silver badge8 bronze badges 5-
1
Where are
Image1,2,3..classes(objects)? – Mihai Alexandru-Ionut Commented Feb 19, 2017 at 13:02 -
1
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 for the help you need. – Reinstate Monica Cellio Commented Feb 19, 2017 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 Commented Feb 19, 2017 at 13:05
-
You have to use
document.createElement('image')in order to create a new image DOM element. – Mihai Alexandru-Ionut Commented Feb 19, 2017 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. – Useless Code Commented Feb 19, 2017 at 15:47
1 Answer
Reset to default 3You 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/wikipedia/mons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia/wikipedia/mons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia/wikipedia/mons/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);
});发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744728479a4590323.html
评论列表（0条）