Sujet Précédent Sujet Suivant

Probleme de HTML et liaison JS

Fermé
Nyouz Messages postés 10 Date d'inscription dimanche 1 août 2021 Statut Membre Dernière intervention 31 mai 2022 - 31 mai 2022 à 08:39
 DoctorHow - 31 mai 2022 à 11:44
bonjour , en premier lieu merci de prendre le temps de lire ce message je vous en suit très reconnaissant voici mon problème, récemment pour avoir un réel rendu de ma page principal je l ai load avec une ip et plus sur mon dossier interne a mon pc, et voila un problème que je rencontre , mon script pour faire apparaitre une li ainsi que des mots ne se lance pas. Tout du moins 1/7 ou quand je fais un retour en arrière, chose que je n avais pas avant, je voudrais de ce fait savoir pourquoi^^DE plus j ai une erreur que je voudrais réglé et qui est peut etre lié a ce problème 

CSSPlugin.js:985 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at GSCache.getSetter [as set] (CSSPlugin.js:985:350)
    at PropTween._renderPlain [as r] (gsap-core.js:2560:39)
    at PropTween._renderPropTweens [as r] (gsap-core.js:2581:7)
    at _renderZeroDurationTween (gsap-core.js:342:8)
    at Tween.render (gsap-core.js:2322:4)
    at ca (gsap-core.js:122:11)
    at da (gsap-core.js:128:4)
    at updateRoot (gsap-core.js:1920:4)
    at gsap-core.js:860:30
    at Array.forEach (<anonymous>)

ceci est l erreur je ne sais pas si elle est liée vue qu elle est aussi présente le site quand je l avais sur mon disque mais on ne sait jamais. Pour plus d information je vous met le dit script et la page html ci dessous: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="title" href="Js\Name.js"/>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
    <title>Csguessr</title>
    
</head>
<body>   
    <header>
    </header>
    <nav> 
 
            <a href="Csguessr.html" ><img src="img/title.png" class="logo"> </a>

            <ul class="medias">
                <li class="bulle"><a href="https://discord.gg/xxx" ><img src="img/Discord.png" height="40" width="40" alt="img" class="logo-medias"> </a> </li>
                <li class="bulle"><img src="img/wok.png" height="40" width="40" alt="img" class="logo-medias"></li>
                <li class="bulle"><img src="img/wok.png" height="40" width="40" alt="img" class="logo-medias"></li>
                <li class="bulle"><img src="img/wok.png" height="40" width="40" alt="img" class="logo-medias"></li>
            </ul>

    </nav>

    <main class="transition-fade" id="swup"> 
        <div class="transition-fade" id="swup">
         <div class="lignes">
            <div class="l1"></div>
            <div class="l2"></div>             
          </div>

         <div class="container-first">
            <h1><span>GeT</span><span> The</span><span> Gamesense,</span></h1>
            <h1><span>improve</span><span> your </span><span> impact</span></h1>

            <div class="container-btns">
               <button class="btn-first b1"><a href="index.html"> START LEARNING</a></button>
               <button class="btn-first b2"><a href="https://discord.gg/Jb64QDp2hf">SUGGESTION</a></button>
            </div>
         </div>
        </div>
    </main>  




    








    <!--script used:-->
    <script src=Js\anime1.js></script>
    <script src="Js\Name.js"></script>
    <script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
    <script src="Js\transition.js" ></script>
</body>
    

</html>

et le script : 
const titreSpans = document.querySelectorAll('h1 span');
const btns = document.querySelectorAll('.btn-first');
const logo = document.querySelector('.logo');
const medias = document.querySelectorAll('.bulle');
const l1 = document.querySelector('.l1');
const l2 = document.querySelector('.l2');


window.addEventListener('load', () => {

    const TL =gsap.timeline({paused: true});

    TL
    .staggerFrom(titreSpans, 1, {top: -50, opacity: 0, ease: "power2.out"}, 0.3)
    .staggerFrom(btns, 1, {opacity: 0, ease: "power2.out"}, 0.3, '-=1')
    .from(l1, 1, {width: 0, ease: "power2.out"}, '-=2')
    .from(l2, 1, {width: 0, ease: "power2.out"}, '-=2')
    .from(logo, 0.4, {transform: "scale(0)", ease: "power2.out"}, '-=2')
    .staggerFrom(medias, 1, {right: -200, ease: "power2.out"}, 0.3, '-=1');

    
    

    TL.play();
})


en outrepassant pas le css ne sait on jamais plus il y a d information plus je suis précis ^^ 

*, ::before,  ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #333;
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
    background: url("img/test.jpg") ;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow-x: hidden;
    z-index: 10;
}

.container-first {
    position: absolute;
    top: 30%;
    left: 10%;
    z-index: 10;
}

h1 {
    text-transform: uppercase;
    font-size: 110px;
    color: #d6d6d6;
    font-family:'Franklin Gothic Medium', 'Arial Narrow';
    z-index: 10;
}
h1 span {
    position: relative;
    z-index: 10;
}
.container-btns {
    position: relative;
    top: 50px;
    left: 16%;
    text-decoration: none;
    display: inline-block;
    z-index: 10;
}
.btn-first {
    border: 4px solid #171b29;
    outline: none;
    background: transparent;
    font-family:'Franklin Gothic Medium', 'Arial Narrow';
    font-size: 30px;
    padding: 20px;
    width: 300px;
    color: #ecbf04;
    cursor: pointer;
    z-index: 10;
    
}

.btn-first:nth-child(1){
    margin-right: 100px;
    z-index: 10;
}
.btn-first:hover {
    transition: all 0.3s ease-in-out;
    background: #ffc400;
    color: #171b29;
    z-index: 10;
}
.lignes {
    position: absolute;
    top: 6%;
    left: 5%;
    z-index: 10;
}
.l1 {
    width: 300px;
    height: 3px;
    background: #f1f1f1;
    border-radius: 5px;
    z-index: 10;
}
.l2 {
    width: 140px;
    height: 3px;
    background: #f1f1f1;
    border-radius: 5px;
    position: relative;
    top: 20px;
    z-index: 10;
}

.logo {
    position: absolute;
    right: 2.9%;
    top: 4%;
    width: auto;
    height: auto;
    cursor: pointer;
    z-index: 10;
}
.medias {
    list-style-type: none;
    position: absolute;
    right: 3.3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
}
.bulle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 1px solid #ffc400;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    background: #131212;
    cursor: pointer;
    position: relative;
    z-index: 10;
} 


.bulle :hover {
    width: 50px; 
    height: 50px;
    }





.logo-medias {
    width: 40px;
    height: 40px;
    z-index: 10;
}


#background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
  }

/* unvisited link */
a:link {
    color: #ffc400;
  }
  
  /* visited link */
  a:visited {
    color: #ffc400;
  }
  
  /* mouse over link */
  a:hover {
    color: #171b29;
  }
  
  /* selected link */
  a:active {
    color: #171b29;
  }


  a:link {
    text-decoration: none;
  }
  
  a:visited {
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: none;
  }
  
  a:active {
    text-decoration: none;
  }
  
  .transition-fade {
    transition: 0.4s;
    opacity: 1;
  }
  
  html.is-animating .transition-fade {
    opacity: 0;
  }

  .transition-fade {
    transition: 0.4s;
    opacity: 1;
  }
  
  html.is-animating .transition-fade {
    opacity: 0;
  }

encore merci a vous pour votre aide

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
31 mai 2022 à 09:26
Bonjour,

par exemple, sur ces lignes de code : 
   <!--script used:-->
    <script src=Js\anime1.js></script>
    <script src="Js\Name.js"></script>
    <script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
    <script src="Js\transition.js" ></script>

Plusieurs petites choses à corriger comme par exemple ...
- Toujours mettre des quotes dans les attributs html tel que les SRC
- Attention à bien respecter les majuscules/minuscules dans les chemins et/ou les noms des fichiers ( sur windows ça n'a pas d'importance.. mais sur un environnement unix.. ça compte ! )
- Utilises des / et non des \ dans tes chemins ... ( en web, le \ est utilisé pour echapper les caractères... )

Je n'ai pas regardé le reste ..

Pense bien également à totalement vider le cache de ton navigateur dès lors que tu modifies des fichiers JS ou CSS sur ton site. Ainsi tu seras sûr qu'ils sont bien pris en compte ... ( sinon ton navigateur va les garder en mémoire et ne verra pas les éventuelles modifications que tu as fais dessus...)*


--.
Cordialement,
Jordane
0
Réponse 2 / 2
Nyouz Messages postés 10 Date d'inscription dimanche 1 août 2021 Statut Membre Dernière intervention 31 mai 2022
31 mai 2022 à 10:40
bonjour merci pour ta réponse , meme apres changement des "/" rien n a changé et j ai bien fait attention a mes chemins d acces, mais j ai toujours cette erreur: 
CSSPlugin.js:985 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at GSCache.getSetter [as set] (CSSPlugin.js:985:350)
    at PropTween._renderPlain [as r] (gsap-core.js:2560:39)
    at PropTween._renderPropTweens [as r] (gsap-core.js:2581:7)
    at _renderZeroDurationTween (gsap-core.js:342:8)
    at Tween.render (gsap-core.js:2322:4)
    at new Tween (gsap-core.js:2311:9)
    at Function.set (gsap-core.js:2507:10)
    at _initTween (gsap-core.js:2112:47)
    at xa (gsap-core.js:299:3)
    at Tween.render (gsap-core.js:2357:26)
***@***:985
***@***:2560
***@***:2581
***@***:342
***@***:2322
***@***:2311
***@***:2507
***@***:2112
***@***:299
***@***:2357
***@***:2311
***@***:1441
(anonyme) @ anime1.js:18
load (asynchrone)
(anonyme) @ anime1.js:9


ce qui est bien mon probleme >< de plus pour, le navigateur il s actualise a chaque save de mon code ( via une extention )
0
DoctorHow
Modifié le 31 mai 2022 à 11:47
Salut,

Les quotes ne sont plus obligatoires (sauf s'il y a un espace dans la valeur de l'attribut (par ex. 2 noms de classes CSS) en HTML5 mais pour les antislash à la place des slash par contre oui il faut corriger.
Actualiser n'est pas vider le cache!

Sinon on dirait qu'il a du mal avec le script GSAP.
ça donne quoi en mettant en commentaire le script indiqué par "et le script : " en commentaire?
Si ça charge bien il faut chercher l'erreur dans cette partie du code.

Logiquement vos déclarations de variables devraient aussi se trouver dans le window.addEventListener('load'...


Visiblement c'est bien dans votre code qu'il y a une erreur:
(anonyme) @ anime1.js:18
load (asynchrone)
(anonyme) @ anime1.js:9

donc à voir en priorité sur ces 2 lignes la doc des méthodes utilisées:

https://greensock.com/docs/v2/TimelineMax/staggerFrom(

Peut-être comme ça: 

.staggerFrom(Array.from(medias), 1, {right: -200, ease: "power2.out"}, 0.3, '-=1');


parce que .querySelectorAll( ne renvoie pas un Array mais une collection(objet NodeList)
ou en remplaçant par .getElementsByClassName() qui renvoie un Array.

En théorie .forEach est censé fonctionner sur NodeList mais dans le doute.

https://developer.mozilla.org/fr/docs/Web/API/NodeList

Pas d'autres idées.
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
[Liaison internationales] information
mimed -
sebsauvage -

1 réponse
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses