probleme fonction simple

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
aelie54
Messages : 2
Enregistré le : 03 oct. 2021, 20:29

probleme fonction simple

Message par aelie54 » 03 oct. 2021, 20:43

Bonjour à tous,

c'est une bouteille à la mer que je lance car malgré plusieurs solutions essayées et une demande d'aide exterieure, je n'arrive pas à avoir le résultat voulu... et pourtant, à la base le code a été écrit sur code pen et fonctionnait. et c'est un tout petit projet !

il s'agit pourtant de quelque chose de simple : une image dont l'opacité passe de 0 à 100 suivant une keyframs au survol et lorsque l'opacité est supérieure à 0.75 un lien est censé s'afficher!

voici le code html :

Code : Tout sélectionner

<head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width">
  <title>Happy Halloween</title>
  <LINk rel="stylesheet" href="fantome.css" > <script type="text/javascript" src="fantome.js"></script>
</head>

<body>

    <p><span class= "italique">    
    Tu es perdu dans le noir. <br> "Un fantôme est passé par ici, il repassera par là. Trouve le, et il te montrera LA voie !   
    </p><br>
    
    <p class= "texte_en_rouge">    
    ! Attention ! Plusieurs créatures rôdent...   
    </p><br>
  
    <img id="monstre2" src='lg.gif'/>           
    <!--premier monstre qui rode, le loup garou --> 
    <br><br><br><br><br>

    <img id="monstre1" src='hannibal.gif'/>     
    <!--deuxieme monstre qui rode, c'est Hannibal -->

<div class="conteneur">

    <img id= "fantome" src='pd2.jpg'/>          
    <!-- c'est le fantome qu'il faut trouver -->    
    <div id= "liencacher"> <a href= "cadenas.html">Par ici</a> 
    </div>
    <!-- le lien vers page suivante qui est hidden jusqu'à opacité à 75% de l'image fantome -->

</div>
<div class="conteneur2">
    <img id= "monstre3" src= 'witchlaught.gif'/>         
    <!--troisième monstre qui rode, la sorciere -->
</div>
   
</body>
le code CSS :

Code : Tout sélectionner

body { /* police de body */

(je vous epargne tout ce qui text e tmise en forme de flexbox.... )
  
  @keyframes apparition {                                                /*keyframes pour augmenter opacité quand on survole une image de 0 à 1 */
    from { opacity: 0.01; } 
    to { opacity: 1; } 
  }

#liencacher {                                                                   /*le lien pour page suivante est cachée au chargement de la page*/
  display : none; 
} 

  #monstre1, #monstre2, #monstre3, #fantome {                /*tous les monstres ne se voient pas au demarrage car opacité à 0*/
    height : 160px ;
    opacity : 0.9 ;
    text-align: start;
  }
  
  #fantome:hover, #monstre1:hover , #monstre2:hover , #monstre3:hover {         
  /*au survol des images de monstres dont fantome, l'opacité augmente*/ 
      animation-name : apparition;
      animation-duration : 10s ;
      animation-iteration-count: infinite;
  }  
  
  #fantome::selection {                                                         
  /*pour éviter la triche : si selection de ce que contient la page, le fantome ne peut pas être selectionné*/
      animation-name : invisible;
      animation-duration : 10s ;
      animation-iteration-count: infinite;
  }
et la fonction dont il est question, le code JS :

Code : Tout sélectionner

var ghost=document.getElementById("fantome");
var link = document.getElementById("liencacher");
var timer=setInterval("cherche()", 100);

function cherche ( ghost=document.getElementById("fantome").opacity )

{

   if ( ghost=document.getElementById("fantome").opacity > 0.75 )     //condition : si opacité de l'image de fantome superieure à 75%
      {
      //link.style.display='block';//le lien n'est plus caché
      alert("se voit" );                                              //POUR TEST */
      } 
    
   else                                                               //Sinon supérieure le lien n'est plus caché */
      {
      //link.style.display='none';
      alert("se voit pas" );                                          //POUR TEST
      }

}
quand je fais les test seul l'alerte "se voit pas" s'affiche.

le code pen de la page faite au départ :
https://codepen.io/aelie54/pen/OJgqNLv

c'est un appel à l'aide je me prends la tête dessus depuis deux jours...

voici le dossier en libre telechargement pour les plus motivés :
https://wetransfer.com/downloads/88ecf7 ... 723/8e3678

MERCI *snif*

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: probleme fonction simple

Message par webmaster » 03 oct. 2021, 21:22

Bonjour,

La console du navigateur avec le zip indique
Cannot read properties of null (reading 'style')
Ce qui signifie que link n'existe pas

C'est normal.
La création de link (var link = document.getElementById("liencacher");) se fait dans le .js qui est appelé avant le code HTML
Donc à ce moment, il n'y a pas d'élément #liencacher dans la page

Dans un codepen je suppose que les chargements sont différés...

Il faut appeler le .js après la création du DOM (ou utiliser l'event onload)
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

aelie54
Messages : 2
Enregistré le : 03 oct. 2021, 20:29

Re: probleme fonction simple

Message par aelie54 » 03 oct. 2021, 21:37

bonjour, merci pour votre réponse.

helas j'ai déjà tenté avec onload pour la fonction cherche ça ne marche pas (et en enlevant aussi le timer)

qu'est-ce qu'un DOM (je suis débutante) je ne comprends pas "Il faut appeler le .js après la création du DOM".

est-ce que vous avez essayé de votre côté ? cela fonctionne-t-il ? Je suis désespérée.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: probleme fonction simple

Message par webmaster » 04 oct. 2021, 09:32

Je n'ai pas testé en entier
D'ailleurs il y a des différences entre le codepen et le .zip

Appeler le .js a la fin de la page, signifie de déplacer la ligne
<script></script> avant </body>

Le DOM est l'ensemble des objets HTML

Je conseille aussi la lecture de ce tuto pour apprendre a utiliser la console
https://www.toutjavascript.com/savoir/n ... script.php
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre