Discussion :

[avion]

Bonjour,

Après maintes reprises et aussi, des recherches sur la toile, je bloque sur ce code. J'aimerais avoir vos avis de pourquoi cela ne fonctionne pas ?

HTML

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<h4>Javascript/Jquery</h4>
                <div id="progress">
                    <p>Niveau de compétence...<strong>0%</strong></p>
                    <progress value="5" min="0" max="100" id="myProgress">0%</progress>
                </div>

JAVASCRIPT

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
progressValue: function () {
        console.info("app.progressValue")
 
        var val = document.getElementById("#myProgress").getAttribute("value")
        if (val >= 100){
            val = 5
            return
        }
        var newVal = val*1+0.25
        var txt = Math.floor(newVal)+"%"
 
        document.getElementById("#myProgress").getAttribute("value",newVal).text(txt)
        document.querySelector("p strong").textContent = txt
 
        setInterval(function () {
            app.progressValue()
        }, 40)
    }

Merci

[ProgElecT]

Salut

Attention

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.info("app.progressValue")

Au vue de ce lien, préfères plutôt console.log.
Penses à mètres des ; entre chaque instructions, peut être que ta fonction est quittée avant la fin, se qui expliquerai pour partie que cela ne fonctionne pas.
document.getElementById("#myProgress") il me semble que la # est de trop.

[avion]

J'ai mis des ";" (même si pas obligatoire aujourd'hui en JS )partout et enlever le " # " mais rien n'a changé !

[badaze]

Pas besoin de # avec getElementById. Ce n'est peut-être pas la seule erreur mais en tous cas c'en est une.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById("myProgress").

[avion]

Je n'avais pas mis les " # " mais vu que mon code ne fonctionnait pas, je me suis dis je vais les mettre pour voir ! Mais y'a rien qui a changé .

[psychadelic]

ça marchera jamais !

tu lances récursivement une fonction par un setinterval.

ça doit exploser la pile, et de toutes façon ce code n'a aucun sens puisque ta fonction setinterval appelle toutes les 40 milisecondes sa propre fonction.

donc au début tu a une fonction
puis au bout de 40 ms tu en à deux
puis au bout de 80ms tu en a 4,
puis au bout de 120ms tu en à 8 , etc,
ce qui fait qu'au bout d'une seconde il y en a 33 554 432, si mes calculs sont exacts..

Je me demande vraiment pourquoi faire ??

[danielhagnoul]

Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="progress">
    <p>Niveau de compétence : <progress id="myProgress" min="0" max="100" step="0.25" value="5"></progress> <strong>5.00 %</strong></p>
</div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let progressValue = () => {
    const elemMyProgress = document.querySelector("#myProgress");
 
    let val = Number(elemMyProgress.value);
 
    // debug, console, touche F12
    console.log(`value = ${ val }`);
 
    if (val >= 100) {
        val = 5
        return;
    }
 
    let 
        newVal = val + 0.25,
        txt = newVal.toFixed(2) + " %"
 
    // debug
    console.log(`newVal = ${ newVal }`);
    console.log(`txt = ${ txt }`);
 
    elemMyProgress.value = newVal;
 
    document.querySelector("#progress > p > strong").textContent = txt
 
    setTimeout(progressValue, 1000); // 1s
};
 
progressValue();

EDIT 2018-09-01

Un meilleur code :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="progress">
    <p>Niveau de compétence : <progress min="0" max="100" step="0.25" value="5"></progress> <strong>5.00 %</strong></p>
</div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const 
    elemDivProgress = document.querySelector('#progress'),
    elemProgress = elemDivProgress.querySelector('progress'),
    elemStrong = elemDivProgress.querySelector('strong');
 
let progressValue = () => {
    let val = Number(elemProgress.value);
 
    if (val >= 100) {
        return;
    }
 
    let 
        newVal = val + 0.25,
        txt = newVal.toFixed(2) + " %"
 
    elemProgress.value = newVal;
 
    elemStrong.textContent = txt
 
    setTimeout(progressValue, 1000); // 1q
};
 
progressValue();

[psychadelic]

@avion

ton code JS fait presque 200 lignes, bon, et en plus tu sembles un adepte de l'omission des points-virgules, bon.

Je sais qu'en JS on peut souvent en être amené à devoir écrire pas mal de lignes de code, et que l'utilisation des points-virgules n'est pas obligatoire.
Mais la pour moi, qui utilise toujours les points virgules, lire ton code est un supplice, alors je vais pas continuer.

[Invité]

Bonjour,

la question a déjà été traitée dans cette discussion récente.

NoSmoking y propose un code élégant et efficace : https://codepen.io/jreaux62/pen/xaqwQG