• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

180
Views
I 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>  
almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You have to add src as the image in the images array with using the current index

Codesandbox Demo

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" />

almost 3 years ago · Juan Pablo Isaza Report

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" />

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error