Bonjour,

Pour un projet, je crée une interface web de contrôle très simpliste. Etant totalement novice dans la programmation web je rencontre quelques soucis.
Voici à quoi mon interface ressemble :

Nom : intweb.PNG Affichages : 695 Taille : 68,0 Ko

Donc en gros mon soucis c'est que lorsque j'appuie sur un des boutons ou si je règle avec le slider, mon label dans le bas doigt se modifier et afficher le texte correspondant.
Mais, lorsque je clique sur l'un, puis sur un autre, puis sur un autre, ... Mes différents labels se mettent à "clignoter" et à changer très rapidement et irrégulièrement de valeur.
Comme si, à chaque fois que je clique sur un de mes boutons, je crée une nouvelle "instance" de mon label.

J'espère avoir été assez clair dans mon explication pour que vous puissiez m'éclairer là-dessus.

Voici mon code :

Code : 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Contrôle</title>
    <link href="~/StyleSheets/Index_StyleSheet.css?v8" rel="stylesheet" />
 
    <script>
 
        function Verif(Mode) {
            var countDownDate = new Date();
            var Start = setInterval(function () {
                var now = new Date().getTime();
                var distance = now - countDownDate.getTime();
                var jours = Math.floor(distance / (1000 * 60 * 60 * 24));
                var heures = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var secondes = Math.floor((distance % (1000 * 60)) / 1000);
                switch (Mode) {
                    case 1:
                        var TempDemande = document.getElementById("TemperatureDemandee").value;
                        document.getElementById("Mode").innerHTML = "En mode manuel à " + TempDemande + " °C depuis " + jours + "j " + heures + "h " + minutes + "m " + secondes + "s";
                        document.getElementById("Mode").style.color = "green";
                        break;
                    case 2:
                        document.getElementById("Mode").innerHTML = "En mode fermentation haute depuis " + jours + "j " + heures + "h " + minutes + "m " + secondes + "s";
                        document.getElementById("Mode").style.color = "green";
                        break;
                    case 3:
                        document.getElementById("Mode").innerHTML = "En mode fermentation basse depuis " + jours + "j " + heures + "h " + minutes + "m " + secondes + "s";
                        document.getElementById("Mode").style.color = "green";
                        break;
                    case 4:
                        document.getElementById("Mode").innerHTML = "À l'arrêt";
                        document.getElementById("Mode").style.color = "red";
                        document.getElementById("textInput").value = "";
                        document.getElementById("TemperatureDemandee").value = 0;
                        break;
                }
            }, 1000);
            document.getElementById("Mode").style.visibility = "visible";
        }
 
        function updateTextInput(val) {
            document.getElementById("textInput").value = val;
        }
 
    </script>
 
</head>
<body>
    <div id="CenterDiv">
 
        <button id="BtnStop" onclick="Verif(4);">STOP</button>
 
        <p id="Infos">
            Température intérieure : <br /> <br />
            Température de la bière : <br />
        </p>
 
        <p id="ManualReg">
            Réglage Manuel : <input type="range" value="0" min="0" max="35" onchange="updateTextInput(this.value); Verif(1);" id="TemperatureDemandee"> 
            <input type="text" readonly id="textInput" value="0" />
            °C <br />
        </p>
 
        <div id="DivButtons">
            <label id="LabelAutoReg">Réglages automatiques : </label> <br />
            <button onclick="Verif(2);">Fermentation haute <br /><br />18 à 21 °C</button>
            <button onclick="Verif(3);">Fermentation basse <br /><br />10 à 15 °C</button>
        </div>
 
        <p id="Mode"></p>
 
    </div>
</body>
</html>
Merci pour votre aide et bonne soirée !