Problème avec getElementById qui retourne toujours par NicolasDreux - page 1

J'ai rencontré un problème déroutant dans mon code JavaScript.

J'ai deux boutons, carouselBoutonGauche et carouselBoutonDroite, ainsi qu'une variable elementValue qui maintient une valeur numérique.

Mon objectif est de manipuler des éléments HTML avec des IDs dynamiques (carousel-item-X, où X est la valeur de elementValue).

Cependant, même si je suis sûr que les IDs sont corrects, la méthode getElementById retourne toujours null.

Mon code JS :

const carouselBoutonGauche = document.getElementById("carousel-bouton-gauche");
const carouselBoutonDroite = document.getElementById("carousel-bouton-droite");

let item = null
let elementValue = 0;

carouselBoutonGauche.addEventListener('click', function() {
    if (elementValue > 0) {
        if (item.getElementById("carousel-item-" + elementValue) !== null) {
            elementValue -= 1;
            item = null;
        }
    }
});

carouselBoutonDroite.addEventListener('click', function() {
    if (elementValue < 3) {
        if (item.getElementById("carousel-item-" + elementValue) !== null) {
            elementValue += 1;
            item = null;  
        }
    }
});

Mon code HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/styles.css">
    <script src="js/carousel.js" defer></script>

    <title>Carousel JS</title>
</head>
<body>
    <main>
        <div id="carousel-bouton-gauche"></div>
        <div class="carousel">
            <img src="imgs/illustrations/flower.jpg" alt="fleur violette" id="carousel-item-0">
            <img src="imgs/illustrations/house.jpg" alt="fleur violette" id="carousel-item-1">
            <img src="imgs/illustrations/huron.jpg" alt="fleur violette" id="carousel-item-2">
            <img src="imgs/illustrations/huron.jpg" alt="fleur violette" id="carousel-item-3">
        </div>
        <div id="carousel-bouton-droite"></div>
    </main>
</body>
</html>

Merci d'avance a ce qui voudront bien m'aiguiller. :lol:

Problème avec getElementById qui retourne toujours

Problème avec getElementById qui retourne toujours

Supprimer

Modérer

Signaler le message aux modérateurs