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

0

186
Views
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 answers
Answer question

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 Report

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