code javascript ne fonctionne pas

Par isis, il y a 4 ans

Javascript

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, il y a 4 ans

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, il y a 4 ans

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, il y a 4 ans

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 :/