As I was building a carousel, I became completely lost with my HTML structure:
<!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>
Then, looking at my JavaScript code:
let curr_pos = 0;
const slide = document.getElementsByClassName('carousel_item');
console.log(slide.length);
Despite having 4 items with the class ".carousel_item", the console is inexplicably showing 0 instead of 4. When I tried the same code in the browser console, it displayed the correct number. I'm unsure if the issue lies with my code or if the browser is malfunctioning. Any assistance would be greatly appreciated!