Forum : code javascript ne fonctionne pas

Décrivez ici votre problème ou ce que vous cherchez à faire.

        //variables globales
let compteur = 0
let timer, elements, slides

window.onload = () => {
    const diapo = document.querySelector("diapo")
    elements = document.querySelector(".elements") 
    slides = Array.form(elements.children) 

    // On calcule la largeur du diaporama
    slideWidth = diapo.getBoundingClientRect().width

    let next = document.querySelector("#nav-droite")

    next.addEventListener("click", slideNext)

}

function slideNext(){
    compteur++
    if (compteur = slides.length) {
        compteur = 0
    }
    let decal = -slideWidth * compteur
    elements.style.transform = translateX(${decal}px)
}
function slidePrev(){
    // On décrémente le compteur
    compteur--

    // Si on dépasse le début du diaporama, on repart à la fin
    if(compteur < 0){
        compteur = slides.length - 1
    }

    // On calcule la valeur du décalage
    let decal = -slideWidth * compteur
    elements.style.transform = `translateX(${decal}px)`
}
// Automatiser le diaporama
timer = setInterval(slideNext, 4000)

// Gérer le survol de la souris
diapo.addEventListener("mouseover", stopTimer)
diapo.addEventListener("mouseout", startTimer)

/**
 * On stoppe le défilement
 */
function stopTimer(){
    clearInterval(timer)
}

/**
 * On redémarre le défilement
 */
function startTimer(){
    timer = setInterval(slideNext, 4000)
}
// Mise en oeuvre du "responsive"
window.addEventListener("resize", () => {
    slideWidth = diapo.getBoundingClientRect().width
    slideNext()
})

Entourez votre code en utilisant "```" pour bien le mettre en forme. (ne copiez pas trop de code)

Ce que je veux

Bonjour, je suis débutante, j'apprend a coder du htlm, css et je commence avec javascript, je souhaite créer un diaporama pour mon site, j'ai suivie un tuto, j'ai déjà vérifier plusieurs fois, mon code me semble exacte, pouvez-vous m'aider? si vous trouvez l'erreur? Merci

Ce que j'obtiens

J'ai les 4 images à la suite les unes des autres, en vertical, les deux flèches s'affiche, mais je ne peux pas faire défiler les images?

3 réponses

popotte

Alors déjà il y a une erreur:

slides = Array.form(elements.children)  **X**
slides = Array.from(elements.children) **V**

(Et selon le html y'aura peut etre pas besoin de ".children" mais ca dépends)

Sinon possible d'avoir le HTML et le CSS?
Et aussi quand tu ouvre la page, ouvres l'inspecteur puis sur "console", recharges la page, passe l'erreur affichée si y'en a une, ensuite cliques sur la fleches droite qui est sensée faire défiler le caroussel, et envoie l'errur si y'en a une (et dit le si aucune erreur ne s'affiche x))

isis

Auteur

Merci pour ta réponse popotte, j'ai suivie tes instructions j'ai envoyé l'erreur : "index1.html:147 Uncaught SyntaxError: missing ) after argument list"
j'ai toujours pas eu de retour...

Ca c'est le html:

</style>
<body>
<main>
<h1>Diaporama</h1>

    <!-- Conteneur principal de tout le diaporama -->
    <div class="diapo">
        <!-- Conteneur des "diapos" -->
        <div class="elements">
            <!-- Première diapo -->
            <div class="element active">
                <img src="image5.jpg.gif" alt="Image 5">
                <div class="caption">
                    <h2>chambre1</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, saepe.</p>
                </div>
            </div>
            <!-- Deuxième diapo -->
            <div class="element">
                <img src="image6.jpg.jpg" alt="Image 6">
                <div class="caption">
                    <h2>chambre2</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, saepe.</p>
                </div>
            </div>
            <!-- Troisième diapo -->
            <div class="element">
                <img src="image7.jpg.jpg" alt="Image 7">
                <div class="caption">
                    <h2>salle de bain1</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, saepe.</p>
                </div>
            </div>
            <!-- Quatrième diapo -->
            <div class="element">
                <img src="image8.jpg.jpg" alt="Image 8">
                <div class="caption">
                    <h2>salle de bain2</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, saepe.</p>
                </div>
            </div>
        </div>
        <!-- Flèches de navigation -->
        <i id="nav-gauche" class="las la-chevron-left"></i>
        <i id="nav-droite" class="las la-chevron-right"></i>
    </div>
</main>

<script type="text/javascript">
    //variables globales

    le CSS:

     <style type="text/css">

   img{
       width: 1000px;
       height: 600px;
   }

    main{
         width: 80%;
         margin: auto;
    }

    .diapo{
           position: relative;

    }

    #nav-droite,#nav-gauche{
                             position: absolute;
                             top: 50%;
                             transform: translateY(-50%);
                             color: black;
                             font-size: 3em;

    } 

    #nav-droite{
                right: 20px;
     }

    #nav-gauche{
                left: 20px;
     }  

     .elements{
                display: flex;
                transition: 1s linear;
     }

     .element{
              flex: 1 0 100%;
              position: relative;
     }
     .element > img{
                    width: 100%;
                    }

    .caption{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              text-align: center;
              background-color: rgba(255,255,255,0.4);
              padding: 30px;
     }

popotte

Mmmh d'après l'erreur, il y'a une parenthèse qui manque dans la ligne 147 de ton fichier, il y'a soit vraiment une parenthèse manquante à la ligne 147, soit un endroit mal écrit entre la ligne 145 et 150 environs et qui casse la code :/