CODEWITHSUNDEEP
javascripthtmlarraysprofile
Tom_Mouse
Tom_Mouse

Reputation: 1

How to display multiple images in a html div, using javascript's array and loop

I want to display multiple images in an HTML <div>, so that user can select select the 'avatar' for their profile. I have written this javascript, but it displays only last image in array.

const array1 =[
"Multiavatar1.png",
"Multiavatar2.png", "Multiavatar3.png", "Multiavatar4.png", "Multiavatar5.png", "Multiavatar6.png", "Multiavatar7.png", "Multiavatar8.png", "Multiavatar9.png", "Multiavatar10.png", "Multiavatar11.png", "Multiavatar12.png", "Multiavatar13.png", "Multiavatar14.png", "Multiavatar15.png", "Multiavatar16.png", "Multiavatar17.png", "Multiavatar18.png", "Multiavatar19.png", "Multiavatar20.png", "Multiavatar21.png", "Multiavatar22.png", "Multiavatar23.png", "Multiavatar24.png", "Multiavatar25.png", "Multiavatar26.png", "Multiavatar27.png", "Multiavatar28.png", "Multiavatar29.png", "Multiavatar30.png", "Multiavatar31.png", "Multiavatar32.png", "Multiavatar33.png", "Multiavatar34.png", "Multiavatar35.png", "Multiavatar36.png", "Multiavatar37.png", "Multiavatar38.png", "Multiavatar39.png", "Multiavatar40.png", "Multiavatar41.png", "Multiavatar42.png",
                    ];

array1.forEach( element => {
            var image = `<img src="avatar/${element}" alt="img">`;
            document.getElementById('avatar_div').innerHTML = image;
});

But apparently I tried using the below script in a separate file, and this worked.

const array1 =[                             "Multiavatar1.png",
"Multiavatar2.png",
"Multiavatar3.png",
"Multiavatar4.png", "Multiavatar5.png", "Multiavatar6.png", "Multiavatar7.png", "Multiavatar8.png", "Multiavatar9.png", "Multiavatar10.png", "Multiavatar11.png", "Multiavatar12.png", "Multiavatar13.png", "Multiavatar14.png", "Multiavatar15.png", "Multiavatar16.png", "Multiavatar17.png", "Multiavatar18.png", "Multiavatar19.png", "Multiavatar20.png", "Multiavatar21.png", "Multiavatar22.png", "Multiavatar23.png", "Multiavatar24.png", "Multiavatar25.png", "Multiavatar26.png", "Multiavatar27.png", "Multiavatar28.png", "Multiavatar29.png", "Multiavatar30.png", "Multiavatar31.png", "Multiavatar32.png", "Multiavatar33.png", "Multiavatar34.png", "Multiavatar35.png", "Multiavatar36.png", "Multiavatar37.png", "Multiavatar38.png", "Multiavatar39.png", "Multiavatar40.png", "Multiavatar41.png", "Multiavatar42.png",
                    ];

array1.forEach( element => {
                
                var h = `<img src="avatar/${element}" alt="img"><br>`;
            
        document.write(h);
});

Can anyone explain me, what am I doing wrong in first script.

And suggestions for my code to work?

Upvotes: 0

Views: 1370

Answers (1)

Spectric
Spectric

Reputation: 31992

Your first sample is not working because you are overwriting the previous HTML.

Your second sample is working because document.write appends the HTML.

To make the first sample work, use += (addition assignment operator) instead of =:

const array1 = [
    "Multiavatar1.png",
    "Multiavatar2.png", "Multiavatar3.png", "Multiavatar4.png", "Multiavatar5.png", "Multiavatar6.png", "Multiavatar7.png", "Multiavatar8.png", "Multiavatar9.png", "Multiavatar10.png", "Multiavatar11.png", "Multiavatar12.png", "Multiavatar13.png", "Multiavatar14.png", "Multiavatar15.png", "Multiavatar16.png", "Multiavatar17.png", "Multiavatar18.png", "Multiavatar19.png", "Multiavatar20.png", "Multiavatar21.png", "Multiavatar22.png", "Multiavatar23.png", "Multiavatar24.png", "Multiavatar25.png", "Multiavatar26.png", "Multiavatar27.png", "Multiavatar28.png", "Multiavatar29.png", "Multiavatar30.png", "Multiavatar31.png", "Multiavatar32.png", "Multiavatar33.png", "Multiavatar34.png", "Multiavatar35.png", "Multiavatar36.png", "Multiavatar37.png", "Multiavatar38.png", "Multiavatar39.png", "Multiavatar40.png", "Multiavatar41.png", "Multiavatar42.png",
];

array1.forEach(element => {
    var image = `<img src="avatar/${element}" alt="img">`;
    document.getElementById('avatar_div').innerHTML += image;
});

Demo:

const array1 = [
  "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1",
  "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"
];

array1.forEach(element => {
  var image = ` <img src = "${element}" alt = "img">`;
  document.getElementById('avatar_div').innerHTML += image;
});
``
<div id="avatar_div"></div>

Upvotes: 1

Related Questions