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

LucasWerquin

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 {}.

AscolRusche

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

LucasWerquin

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

AscolRusche

27 septembre 2021 à 7:45:55

Vraiment merci, celà va m'avancer beaucoup.

LucasWerquin

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 ).