Partage
  • Partager sur Facebook
  • Partager sur Twitter

Uncaught ReferenceError: changeText is not defined

Texte chronométré

    26 septembre 2021 à 14:27:57

    Bonjour,

    Après avoir parcouru bons nombres de pages web/forum, je viens ici pour trouver une réponse à mon problème.

    Je chercher à modifier une balise html tel que 

    <body>
    <p id="a_changer">Contenu à changer</p>
    </body>

    J'ai trouver des pages expliquant comment modifier le contenue d'une balise tel que : https://waytolearnx.com/2019/09/comment-changer-le-contenu-dun-div-en-javascript.html

    Et le code d'un chronomètre

    function sleep(delay) {
        var start = new Date().getTime();
        while (new Date().getTime() < start + delay);
    }

    Je n'arrive pas à associer les deux dans un script js.

    En esperant avoir de l'aide. Ascol

    • Partager sur Facebook
    • Partager sur Twitter
      26 septembre 2021 à 14:56:01

      L'idée générale, c'est d'avoir un décompte dans ta balise ?

      Alors, dans un premier temps, pour changer le contenu d'un élément :

      let contenu = "nouveau message";
      document.getElementById('a_changer').innerHTML = contenu;

      La deuxième ligne fait ceci :

      - elle selectionne l'élément HTML ayant pour id "a_changer".
      - elle accède à sa propriété innerHTML, soit son contenu.
      - elle redéfinit ce contenu, en l'occurrence elle le remplacera par la valeur de la variable "contenu" défini à la première ligne.

      Ensuite, ta ligne 3 est incorrecte. Incomplète, ça tu dois le savoir, mais il y a aussi ce point virgule qui n'a rien à faire là.
      Le mot clé while s'utilise avec les parenthèses, qui définisse la condition à vérifier, et avec un bloc d'instruction contenu dans des accolades {}.

      • Partager sur Facebook
      • Partager sur Twitter
        26 septembre 2021 à 15:35:37

        Merci pour votre réactivité mais voici ma fonction sleep ne marche pas...

        La voici : 

        function sleep(delay) {
            var start = new Date().getTime();
            while (new Date().getTime() < start + delay){}
        }

        Je ne vous est peut être mal compris.

        Je viens d'essayer autre chose :

        function modif(contenu){
            document.getElementById('a_changer').innerHTML = contenu
        }
        
        function start(){
            let contenu = "nouveau message"
            setTimeout(modif(contenu),5000);
        }

        Je n'obtiens rien en plus. Le setTimeout semble ne pas fonctionnner.

        J'ai pourtant essayer d'autre navigateur

        -
        Edité par AscolRusche 26 septembre 2021 à 15:55:00

        • Partager sur Facebook
        • Partager sur Twitter
          26 septembre 2021 à 15:53:09

          Oui, en l'état, ton bloc d'instruction étant vide...
          ... ta fonction ne fais juste rien.

          Donne-moi un peu de temps pour regarder un peu ça de mon côté, parce que je ne suis pas sûr que la condition de ton while soit valide. Et ça, c'est un coup à faire des boucles infinies, ce qui est assez pénible.

          [edit]

          Bon, comme je le pressentais, l'utilisation d'une boucle while n'est pas vraiment idéale pour ce genre de chose.
          Pour le moment j'ai ça, qui n'est pas idéal, mais qui fonctionne un peu :

          HTML

          <p id="a_changer">Contenu à changer</p>

          et le JS :

          function sleep(delay) {
              let stop = new Date().getTime() + delay;
              let sleepTimer = setInterval(() => {
                  if(stop - new Date().getTime() < 0)
                      clearInterval(sleepTimer);
                  document.getElementById('a_changer').innerHTML = stop - new Date().getTime();
              }, 100);
          }

          Le plus simple étant selon moi de définir un timestamp correspondant à l'arrêt du timer. ( let stop )
          Ensuite, plutôt qu'une boucle while, je propose l'utilisation de setInterval.
          Dans le bloc d'instruction du setInterval, il faut tout d'abord vérifier que le timestamp actuel est bien inférieur au timestamp défini dans "stop". Si ce n'est pas le cas, il faut arrêter le setInterval ( clearInterval ). Sinon, afficher le temps restant.

          Bon, ça reste pas génial pour afficher un chrono, on est d'accord.
          Alors je me suis un peu creusé et j'ai pondu ça :

          function sleep(delay) {
              console.log(new Date());
              var stop = new Date().getTime() + delay;//définir le timestamp final
              let sleepTimer = setInterval(() => { //définir la fonction qui sera exécutée à intervalle régulier
                  if(stop - new Date().getTime() < 0) // prévoir d'arrêter d'exécuter la fonction quand le timestamp est atteint
                      clearInterval(sleepTimer);
                  let actualTimestamp = stop - new Date().getTime(); //définir le nombre de millisecondes entre le timestamp actuel et le timestamp final
                  let Totalsecondes = (actualTimestamp - (actualTimestamp%1000))/1000; //réduire ce nombre en secondes
                  let minutes = parseInt((Totalsecondes-Totalsecondes%60)/60); // extraire les minutes
                  let secondes = Totalsecondes%60; //extraire les secondes
                  document.getElementById('a_changer').innerHTML = minutes + ":" + (secondes - secondes%10)/10/* dizaines de secones*/ + secondes%10; //et enfin unités
              }, 200);
          }



          -
          Edité par LucasWerquin 26 septembre 2021 à 18:31:24

          • Partager sur Facebook
          • Partager sur Twitter
            27 septembre 2021 à 7:45:55

            Vraiment merci, celà va m'avancer beaucoup.
            • Partager sur Facebook
            • Partager sur Twitter
              27 septembre 2021 à 8:58:51

              Merci à toi aussi.
              J'avais jamais eu l'occasion de me pencher sur ce genre de projet, ça m'a appris quelques trucs aussi ;)

              N'oublie pas de mettre le sujet comme résolu ( bouton tout en haut du sujet ).

              • Partager sur Facebook
              • Partager sur Twitter

              Uncaught ReferenceError: changeText is not defined

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown