0
313
VistasI am trying to show an image from an array of images - javascript
I have one image showing on my homepage and want the user to click next image button so the next image in the array displays. I have seen similar questions and have tried resolving the issue, but nothing seems to work. I think the code is correct I just can't seem to get the images to display when the user hits 'Next Image'. Any recommendations would be greatly appreciated.
JS:
var images = ["/aboutmepages/imagesAM/SSR.jpeg", "/aboutmepages/imagesAM/ATA.png",
"/aboutmepages/imagesAM/BC.jpg", "/aboutmepages/imagesAM/GCU.jpg"
];
var current = 0; //current image displayed
var change_img = document.getElementById("placeholder");
function next() {
if (current >= 0) {
current = images.length;
current++;
}
change_img.src = images[current].src;
}
HTML
<img src="/aboutmepages/imagesAM/SSR.jpeg" id="placeholder">
<div id="display">
<button class="button" onclick="next()">Next Image</button>
</div>
2 Respuestas
Responde la pregunta0
You have to add src as the image in the images array with using the current index
function next() {
if (current === images.length) current = 0;
change_img.src = images[current++];
}
NOTE: I've used lorem-picsum for demo purpose. You can add yours link
var images = [
"https://picsum.photos/200/300",
"https://picsum.photos/200",
"https://picsum.photos/200/300",
"https://picsum.photos/200",
"https://picsum.photos/200/300",
"https://picsum.photos/200"
];
var current = 0; //current image displayed
var change_img = document.getElementById("placeholder");
function next() {
if (current === images.length) current = 0;
change_img.src = images[current++];
}
const button = document.querySelector("button");
button.addEventListener("click", next);<div id="display">
<button class="button">Next Image</button>
</div>
<img src="https://picsum.photos/200" id="placeholder" />0
The key issue is this line:
change_img.src = images[current].src;
It should be
change_img.src = images[current];
as you don't have src properties on any of the elements in the array, just strings at array indexes.
Instead of checking that current >= 0 (we already know that it's going to be zero), check that current is less than the array length (because arrays use a zero-based index).
const images = [
'https://dummyimage.com/100x100/00ff00/000',
'https://dummyimage.com/100x100/0000ff/fff',
'https://dummyimage.com/100x100/000/fff',
'https://dummyimage.com/100x100/fff/000',
];
const placeholder = document.getElementById('placeholder');
const button = document.querySelector('button');
button.addEventListener('click', next, false);
let current = 0;
function next() {
if (current < images.length) {
placeholder.src = images[current];
++current;
}
}
next();<button>Next</button>
<img id="placeholder" />