0

Tengo el siguiente código para hacer un "slideshow" pero mi consola dice "x[myIndex - 1] is undefined".

var myIndex = 0;
animacion();

function animacion() {
  var i;
  var x = document.getElementsByClassName("slides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex - 1].style.display = "block";  
  setTimeout(animacion, 2000);    
}

¿Pueden ver el error?

2 respuestas 2

1

Para un array en Javascript la posición -1 no existe, a menos que la definas explicita-mente, también se debe tener en cuenta que si los elementos del DOM no han sido cargados.

var el_array = []
console.log(el_array[-1])
// salida undefined

var el_array = []
el_array[-1] = "algo"
console.log(el_array[-1])
// imprime algo

Para tu caso la variable myIndex debería iniciar en 1 asi cuando implementes la primera vez x[myIndex-1] sera equivalente a x[0].

Ademas la sentencia document.getElementsByClassName("slides"); retornara undefined dado que el script se ejecuta antes que se pinten los elementos, para solventar esto puedes:

  1. Agrega el script al final del documento antes del cierre </body>
  2. Usar el evento DOMContentLoaded que se ejecuta cuando el HTML del DOM ha sido creado.

Ahora un ejemplo de como quedaría el código completo:

var myIndex = 1;

function animacion() {
  var i;
  var x = document.getElementsByClassName("slides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex - 1].style.display = "block";  
  setTimeout(animacion, 2000);    
}

document.addEventListener("DOMContentLoaded", function(event) {
   // Llama la funcion animacion, cuado esta cargado el DOM
   animacion();
});
<li class="slides"> HOLA 1</li>
<li class="slides"> HOLA 2</li>
<li class="slides"> HOLA 3</li>
<li class="slides"> HOLA 4</li>
<li class="slides"> HOLA 5</li>

4
  • Hmm entiendo, pero aun así me sigue apareciendo el mismo error, es como si despues del for ya no me reconociera la variable x porque en consola me dice que x no está definida, pero si lo esta! Commented el 24 nov. 2019 a las 20:44
  • 1
    asegurate de que tu script este al final del documento, porque es la forma en que x podria no tener los elementos slides Commented el 24 nov. 2019 a las 21:24
  • vaya, tenia mi script en un documento externo, pero lo puse dentro de mi html justo despues de todos los elementos y funcionó perfecto, no entiendo por qué Commented el 25 nov. 2019 a las 1:47
  • @ErnestoGutierrez he actualizado el código con el evento DOMContentLoaded que se ejecuta cuando el HTML del DOM ha sido creado.
    – Diego Mesa
    Commented el 25 nov. 2019 a las 12:16
-1

Creo que te falta un punto y coma en la asignación del if.

var myIndex = 1;
animacion();

function animacion() {
  var i;
  var x = document.getElementsByClassName("slides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1;}    
  x[myIndex - 1].style.display = "block";  
  setTimeout(animacion, 2000);    
}
4
  • En JS el punto y coma es opcional salvo algunos escenarios que no creo sea este
    – user128299
    Commented el 24 nov. 2019 a las 21:13
  • Ya, lo digo porque, al ser una asignación... Creo que es uno de los casos sensibles. Vamos, según recuerdo.
    – Felipe
    Commented el 24 nov. 2019 a las 21:16
  • Revisa aquí más al respecto es.stackoverflow.com/questions/146487/…
    – user128299
    Commented el 24 nov. 2019 a las 21:19
  • Tienes razón. Lo he probado y, efectivamente, no afecta. Disculpas y gracias por la aclaración.
    – Felipe
    Commented el 24 nov. 2019 a las 21:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.