• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

181
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda