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

0

184
Vistas
Estoy tratando de mostrar una imagen de una matriz de imágenes - javascript

Tengo una imagen que se muestra en mi página de inicio y quiero que el usuario haga clic en el botón de imagen siguiente para que se muestre la siguiente imagen en la matriz. He visto preguntas similares y he intentado resolver el problema, pero nada parece funcionar. Creo que el código es correcto. Parece que no puedo mostrar las imágenes cuando el usuario presiona "Siguiente imagen". Cualquier recomendación sería muy apreciada.

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

Debe agregar src como la image en la matriz de images usando el índice current

Demostración de Codesandbox

 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

El problema clave es esta línea:

 change_img.src = images[current].src;

Debería ser

 change_img.src = images[current];

ya que no tiene propiedades src en ninguno de los elementos de la matriz, solo cadenas en los índices de la matriz.

En lugar de verificar que current >= 0 (ya sabemos que será cero), verifique que current sea menor que la longitud de la matriz (porque las matrices usan un índice basado en cero).

 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