Estaba creando un carrusel. Ya no sé qué diablos está pasando, en mi HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="Carousel.css"> <script src="Carousel.js"></script> <title>Carousel</title> </head> <body> <h1>This is the Carousel</h1> <div id="carousel"> <div class="carousel_item carousel_item--visible"><img src="Images/Sasuke.jpg" alt="" srcset=""></div> <div class="carousel_item"><img src="Images/Spider-man.jpg"></div> <div class="carousel_item"><img src="Images/The Dark Knight.jpg" ></div> <div class="carousel_item"><img src="Images/Arcane.jpg"></div> <div class="carousel_actions"> <button id="carousel_button--prev"> < </button> <button id="carousel_button--next"> > </button> </div> </div> </body> </html>y mi JS:
let curr_pos = 0; const slide = document.getElementsByClassName('carousel_item'); console.log(slide.length);En esto, como puede ver, tengo 4 elementos con .carousel_item, por lo que la consola debería mostrar 4, sin embargo, muestra 0. Pero si uso console.log (slide.length) en la consola del navegador, muestra 4 .
Ahora tengo que iniciar Js desde cero o el navegador se vuelve loco. ¡Por favor alguien ayuda!
Los documentos HTML se analizan de arriba a abajo. Cuando se encuentra una etiqueta de secuencia de script , todos los demás análisis se detienen hasta que la secuencia de comandos finaliza su ejecución.
Por lo tanto, los elementos colocados después de la etiqueta del script no serán visibles en el DOM del script.
Para resolver esto, mueva la posición de la etiqueta del script a la parte inferior de la etiqueta del body :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="Carousel.css"> <title>Carousel</title> </head> <body> <h1>This is the Carousel</h1> <div id="carousel"> <div class="carousel_item carousel_item--visible"><img src="Images/Sasuke.jpg" alt="" srcset=""></div> <div class="carousel_item"><img src="Images/Spider-man.jpg"></div> <div class="carousel_item"><img src="Images/The Dark Knight.jpg" ></div> <div class="carousel_item"><img src="Images/Arcane.jpg"></div> <div class="carousel_actions"> <button id="carousel_button--prev"> < </button> <button id="carousel_button--next"> > </button> </div> </div> <script src="Carousel.js"></script> </body> </html>