Cannot display images stored in array automatically in JavaScript

Question

I am trying to create webpage where the user clicks a button and then the page displays images saved in an array.When I run the code, It displays the source of the images, but not the images. Any tips on what I am doing wrong? Thanks in advance

<!DOCTYPE html>
<html>
<body>

<h1>Slideshow</h1>

<p>Holiday Slideshow</p>


<button type="button" onclick="beginShow()">View Slideshow</button>

<p id="p1"><img id="pic1" src="./assets/pic1.jpg">
Click on "View Slideshow". Click to display slideshow</p>
<script>
var list = [
    "/assets/pic1.jpg",
    "/assets/pic2.jpg",
    "./assets/pic3.jpg",
    "./assets/pic4.jpg"
];

var index = 0;

function beginShow() {
    setTimeout(myTimeout1, 2000) 
    setTimeout(myTimeout2, 4000) 
    setTimeout(myTimeout3, 6000)
    setTimeout(myTimeout4, 8000) 
}
function myTimeout1() {
    document.getElementById("p1").innerHTML = list[0];
}
function myTimeout2() {
    document.getElementById("p1").innerHTML = list[1];
}
function myTimeout3() {
    document.getElementById("p1").innerHTML = list[2];
}
function myTimeout4() {
    document.getElementById("p1").innerHTML = list[3];
}
</script>

    </body>
</html>

Thanks for your reply, when I change the code to what you've suggested, (replacing x with 0,1,2,3) the images do not load when viewing in browser. — digitalfire
– digitalfire, Commented Apr 6, 2016 at 13:45

Lewis · Accepted Answer · 2016-04-06 14:15:20Z

1

You need to set those urls to the image instead of its container.

Your code should be written like this.

var list = [
    "/assets/pic1.jpg",
    "/assets/pic2.jpg",
    "./assets/pic3.jpg",
    "./assets/pic4.jpg"
];
function showImage(i){
    i = i || 0;
    setTimeout(function(){
        document.getElementById("pic1").src = list[i];
        i < list.length - 1 && showImage(++i);
    },2000);
}
showImage();

edited Apr 6, 2016 at 14:15

answered Apr 6, 2016 at 13:38

Lewis

15k14 gold badges70 silver badges88 bronze badges

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

7 Comments

Alexander Dixon Over a year ago

You passed in src as the function variable but then used i without initializing it.

Lewis Over a year ago

@AlexanderDixon Thanks for the hint.

Alexander Dixon Over a year ago

The iteration is not working properly. In the console, i is returning NaN. Essentially, the #pic1 src attribute is always returning the initial value, or the first picture. It does not increment.

Lewis Over a year ago

@AlexanderDixon I've fixed it.

Alexander Dixon Over a year ago

It returned undefined a few times. This is a learning experience for me, not so much a critique on your code. Could you please tell if the only way an undefined variable will work is in a for loop method?

|

Slaven Tomac · Accepted Answer · 2016-04-06 13:23:53Z

0

If you are going to do it this way you have to change what you assign to innerHTML:

document.getElementById("p1").innerHTML = '<img src=' + list[0] + '>;

But I recommend you rather change src attribute of image to list[0]:

document.getElementById('pic1').setAttribute('src', list[0]);

answered Apr 6, 2016 at 13:23

Slaven Tomac

1,5722 gold badges27 silver badges39 bronze badges

5 Comments

digitalfire Over a year ago

Thanks for your reply. When I change it to the .setAttribute option, pictures 2,3 and 4 do not load when viewing the code through a web browser. Any suggestions?

Slaven Tomac Over a year ago

Are you sure you didn't just copy pasted it? You need to change parameter too (so change list[0] to list[1], list[2] etc.)

digitalfire Over a year ago

I changed the parameter for all four lines (so it runs 0 to 3)

Slaven Tomac Over a year ago

Do you get any error in network tab of dev tools? Because this way you are changing src attribute so it should be downloaded (or at least tried) by the browser...

digitalfire Over a year ago

I needed full stops before the source in the array. Thanks for your help!

Collectives™ on Stack Overflow

Cannot display images stored in array automatically in JavaScript

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related