Ecouter les événements d'un SELECT

**Freddy3790** · 13/07/2023, 12h32

Mme, Mrs, bonjour,

depuis quelques mois je m'initie à la programmation (rêve de gosse). Merci aux différents tutos et forums. Jusqu'ici j'ai trouvé mes réponses en lisant sur des forums des situations semblable à la mienne, Mais aujourd'hui je suis confronté à un problème qui m'oblige à appeler au secours et vous êtes le 1er forum qui m'avez inspiré.

Je ne suis pas sur d'être à la bonne rubrique, mais j'avoue être un peu perdu devant le nombre important de sujet, et il me semble en tout cas à mes yeux avoir choisi la plus adéquate. Si je ne suis pas au bon endroit, je vous en présente mes excuses

Je suis sur la conception dune page internet sur laquelle j'ai 2 sélect et j'ai un soucis d'écoute sur l'un d'eux. Est ce bien ici que je dois m'adresser?

par avance merci

**Doksuri** · 13/07/2023, 15h53

dans l'ideal, il faudrait poster sur le forum javascript (car je presume que ca conserne du JS)
=> au pire, un moderateur deplacera le sujet

montres-nous ton code, et ou tu en es.
sans code, on ne pourra rien faire

(bienvenue sur le forum

)

**Freddy3790** · 13/07/2023, 21h20

Merci beaucoup pour votre aide, ainsi que votre réponse rapide.

Je suis désolé pour mon erreur d'emplacement, ainsi que mon titre répondant peu aux règles demandées. Cependant, pour ma défense il me semblais que le titre apportait plus de précision au problème rencontré. J'espère faire mieux la prochaine demande (si besoin).

voici mon problème: sur cette page html j'ai 2 selects. au départ essayant de respecter le bonnes pratiques recommandées par le w3school et autres youtubeurs, j'ai demandé l'écoute dans le fichier javascript avec les "DOM event Object". aucune écoute sur les 2 select.

du coup j'ai tenté une écoute moins conventionnelle par le fichier HTML avec "onchange". du coup ça fonctionne pour le 1er select, mais toujours pas pour le 2ème. ceci dit grâce à des test malgré pas d'écoute les valeurs choisies sont biens prises. bien que je ne sois pas très bon au jeu des 7 erreurs, j'ai beau regarder dans tout les sens, je ne vois pas d'erreurs de syntaxes.

voici le code HTML correspondant:

Code html :

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
 <div id="divconso">
 
            <p > le calcul suivant est un outil permettant d'estimer la quantité de chaleur consommée durant une période définie en fonction de la température extérieur, de la température ambiante, des déperditions estimées par coëfficient G et du rendement du générateur comblant les déperditions</p>
                <p id="consoPSurface">surface habitable estim&eacute;e = <input id="consoinsh"  step="0.01" class="innum">m&sup2;</p>
                <p id="consoPHauteur">hauteur sous plafond estim&eacute;e = <input id="consoinh"  step="0.01" class="innum">m</p>
 
 
            <div id="labcoefgconso">
                <label for="coefGconso" class="lab">sélectionner le coëfficient G:</label>
                <select name="Gconso" id="coefgcons" onchange="calcenerut1">
                <option value="0.0">RT 2020 &Rightarrow; 0.0 w/m&sup3.&deg;c</option>
                <option value="0.22">RT 2012 &Rightarrow; 0.22 w/m&sup3.&deg;c</option>
                <option value="0.47">BBC rénovation 2009 &Rightarrow; 0.47 w/m&sup3.&deg;c</option>
                <option value="0.58">RT 2005 gaz &Rightarrow; 0.58 w/m&sup3.&deg;c</option>
                <option value="0.87">HPE rénovation 2009 &Rightarrow; 0.87 w/m&sup3.&deg;c</option>
                <option value="0.94">RT 2005 élec &Rightarrow; 0.94 w/m&sup3.&deg;c</option>
                <option value="1.12">Ancien mal isolé &Rightarrow; 1.12 w/m&sup3.&deg;c</option>
                <option value="1.79">ancien très mal isolé &Rightarrow; 1.79 w/m&sup3.&deg;c</option>
                </select>
                <p class="source">source:<a href="https://www.infoenergie.eu/riv+ener/complements/coeff-evaluation-besoin-thermique.htm">https://www.infoenergie.eu/riv+ener/complements/coeff-evaluation-besoin-thermique.htm</a></p>
 
            </div>
            <p>température moyenne extérieur durant la période de l'estimation = <input id="consotext"  step="0.01" class="innum">&deg;c</p>
            <p>température moyenne ambiante durant la période de l'estimation = <input id="consotamb"  step="0.01" class="innum">&deg;c</p>
            <label class="pcoefg" >calcul du temps nécéssaire au transfert d'énergie </label><br>
            <p id="pconsodate">début de période d'estimation:<input type="date" id="consoStartDate"> &emsp; &emsp; fin de période d'estimation:<input type="date" id="consoEndDate"></p>
            <p id="pconsotime">nombres d'heures durant l'estimation: <input type="time" id="intimeconso"> </p>            
            <p id="outputDateConso"></p>
            <p id="outputDeperConso"></p>
            <p id="c"></p>
 
                <p>quantité de chaleur estimée nécéssaire <input id="kwhnécéss" step="0.1" class="innum">kWh</p>
            <div id="divRend">
                <div id="labRendConso">
                <label for="deremetconso" class="lab">sélectionner le générateur:</label>
                <select name="emetConso" id="emetconso" onchange="calcenerut1">
                <option value="0.93">chaudiere gaz basse t° 93%</option>
                <option value="1.05">chaudière condensation 105%</option>
                <option value="2">pompe à chaleur COP de 2</option>
                <option value="3">pompe à chaleur COP de 3</option>
                </select>             
                <div><p id="kwhconso"  class="paranote1" ></p></div>
 
                </div>
            </div>
 
         </div>

voici le fichier javascript:

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/*affichage conso d'énergie absorbée*/
  document.getElementById("checkConsoDeper").addEventListener("click", function() {
    document.getElementById("divconso").style.display="block";
    document.getElementById("divRend").style.display="block";
    document.getElementById("checkConsorend").style.display="none";
    document.getElementById("idretmenu").style.display="none";
    document.getElementById("idretSousmenu").style.display="block";
 
 
  });
  /*affichage rendement appareil*/
  document.getElementById("checkConsorend").addEventListener("click", function() {
 
     document.getElementById("divconso").style.display="block";
     document.getElementById("divRend").style.display ="none";
     document.getElementById("checkConsoDeper").style.display ="none";
     document.getElementById("idretmenu").style.display="none";
    document.getElementById("idretSousmenu").style.display="block";
    });
    /*affichage ret sous menu*/
    document.getElementById("idretSousmenu").addEventListener("click", function() {
 
       document.getElementById("divconso").style.display="none";
       document.getElementById("checkConsoDeper").style.display ="block";
       document.getElementById("checkConsorend").style.display="block";
       document.getElementById("idretmenu").style.display="block";
       document.getElementById("idretSousmenu").style.display="none";
      });
 
/* fonctions calcules des différents éléments de la formule */
 
      /* 1 déperditions */
 
 
 
  document.getElementById("consoStartDate").addEventListener("change", function() {
       document.getElementById("pconsotime").style.display = "none";
        document.getElementById("outputDateConso").style.display = "none";
 
  if (document.getElementById("consoStartDate").value == document.getElementById("consoEndDate").value) {
      document.getElementById("pconsotime").style.display = "block";
 
  } else if (document.getElementById("consoStartDate").value == 0 || document.getElementById("consoEndDate").value==0) {
 
 
  }else if (document.getElementById("consoStartDate").value < document.getElementById("consoEndDate").value) {
    document.getElementById("outputDateConso").style.display = "block";
    calculDate();
  }else if(document.getElementById("consoStartDate").value > document.getElementById("consoEndDate").value) {
    alert("choisissez une date de fin de contrôle postérieur à la date de débuts");
  }});
 
 
        /*affichage écoute date de fin*/
  document.getElementById("consoEndDate").addEventListener("change", function() {
 
  document.getElementById("pconsotime").style.display = "none";
  document.getElementById("outputDateConso").style.display = "none";
 
  if (document.getElementById("consoStartDate").value == document.getElementById("consoEndDate").value) {
    document.getElementById("pconsotime").style.display = "block";
 
  } else if (document.getElementById("consoStartDate").value == 0 || document.getElementById("consoEndDate").value==0) {
 
 
  }else if (document.getElementById("consoStartDate").value < document.getElementById("consoEndDate").value) {
    document.getElementById("outputDateConso").style.display = "block"; 
    calculDate();
  }else if(document.getElementById("consoStartDate").value > document.getElementById("consoEndDate").value) {
    alert("choisissez une date de fin de contrôle postérieur à la date de débuts");
  }});
 
 
 
 
 
 
         /*écoute temp, surface, hauteur, coefg, rend*/
         var consDeper=document.getElementById("ConsoDeperConnus");
         var consSurf=document.getElementById("consoinsh");
         var consHaut=document.getElementById("consoinh");
         var consCoefg=document.getElementById("coefgcons");
         var consTamb=document.getElementById("consotamb");
         var consText=document.getElementById("consotext");
         var startEc =document.getElementById("consoStartDate");
         var endEc = document.getElementById("consoEndDate");
         var consEnerUt=document.getElementById("kwhnécéss");
         var consEnerAb=document.getElementById("kwhconso");
         var consRendGene=document.getElementById("emetconso");
 
         startEc.addEventListener("input",calcenerut1);
         endEc.addEventListener("input",calcenerut1);
         /*consDeper.addEventListener("input",calcenerut1)*/;
         consSurf.addEventListener("input",calcenerut1);
         consHaut.addEventListener("input",calcenerut1);
         consCoefg.addEventListener("change",calcenerut1);
         consTamb.addEventListener("input",calcenerut1);
         consText.addEventListener("input",calcenerut1);
         startEc.addEventListener("input",calcenerut1);
         endEc.addEventListener("input",calcenerut1);
         consEnerUt.addEventListener("input",calcenerut1);
         consEnerAb.addEventListener("input",);
         /*consRendGene.addEventListener("change",calcenerut1);*/
 
 
         /*calcul énergie consommée*/
 
 
         function calcenerut1() {
 
          var start = new Date(document.getElementById("consoStartDate").value);
          var end = new Date(document.getElementById("consoEndDate").value);
 
 
           var timeDif = end - start;
           var timeDay = Math.ceil(timeDif / (1000 * 3600 * 24));
 
           document.getElementById("outputDateConso").innerHTML = timeDay + "jour(s)";
 
          var valConsSurf=(consSurf.value);
          var valconsHaut=(consHaut.value);
          var valConsCoefg=(consCoefg.value);
          var valconsTamb=(consTamb.value);
          var valconsText=(consText.value);
          var valconsrend=(consRendGene.value);
 
 
          /*const valconstimeDif=parseFloat(timeDif.value)||0;*/
 
 
 
            var puissUtil= ((valConsSurf * valconsHaut) * valConsCoefg * (valconsTamb - valconsText)) / 1000;
 
 
 
          var consoUtil=((puissUtil*timeDif)*0.0002777778)
          document.getElementById("kwhnécéss").value= consoUtil ;
 
 
          var consoAb = consoUtil/valconsrend;
          var consoAbMaxi = ((consoAb * 10)/100)+consoAb;
          var consoAbMini =consoAb-((consoAb * 10)/100);
          document.getElementById("kwhconso").innerHTML= "la consommation aborbée durant les"+ timeDay+ "jours, est estim&eacute;e entre:"+consoAbMini.toFixed(2)  + "kwh et "+consoAbMaxi.toFixed(2) +"kwh " + "test select rende"+consRendGene.value +"et test select coefG "+ valConsCoefg;
 
 
         };

j'espère avoir mis ce qu'il fallait. Je vous fait grâce du fichier CSS vu que les select ne sont pas gérés par une classe.

j'ai conscience que ce lignes ne sont certainement pas optimisées, et qu'il y a certainement des erreurs de "bonnes pratique" et pour ce je vous demande indulgence.

Je reste dans l'attente de vos conseils éclairés, que j'essaierais de mettre en applications en fonctions de mes capacités.

**mathieu** · 13/07/2023, 23h22

ligne 89 vous déclarez une variable emetconso qui se réfère à votre 2e select.
mais ensuite ligne 103, l'écoute de l'évènement change est en commentaire et j'ai l'impression que rien d'autre dans votre code n'écoute cet évènement de ce select.

au début de votre code, vous utilisez beaucoup de document.getElementById("..."). je vous conseille de déplacer la déclaration des variables des lignes 79 à 89 et de les mettre tout au début de votre code.
vous pourrez ensuite utilisez ces variables partout ce qui aérera votre code.

**Freddy3790** · 13/07/2023, 23h59

bonsoir Mathieu,

Merci beaucoup de m'accorder de votre temps.

Je prend bonne note de votre remarque concernant la déclaration des variables.

Concernant l'écoute du 2ème select emetconso ou var consRendGene, la ligne 103 qui est en commentaire, est la manière dont j'avais déclarer l'écoute la 1ère fois. ne fonctionnant pas, je l'ai désactivé en la mettant en commentaire pour la garder sous le coude, et lancer l'écoute à partir de la page html avec le onchange en ligne 36 comme pour le 1er select en ligne 10. ce qui et bizarre, ce qui marche pour la ligne 10 ne marche pas pour la ligne 36. Du coup, je ne trouve pas non plus l'explication pourquoi l'écoute du 1er select fonctionne avec le onchange dans la page html et non avec le eventListener change "mis pour la recherche en commentaire" dans le fichier javascript alors une fois encore on reconnait les valeurs lors des changements de choix

Autre précision, au cas où cela pourrait avoir son importance, j'écris le code avec visual studio code et apparemment, le navigateur affiche la page offline que j'ouvre après chaque modification et enregistrement du code. Mes fichiers sont enregistrés dans une arborescence dans un cloud onedrive.

**mathieu** · 14/07/2023, 00h06

Envoyé par Freddy3790

le navigateur affiche la page offline que j'ouvre après chaque modification et enregistrement du code

je n'ai pas compris ce que vous appelez "page offline".

est ce que la console du navigateur affiche un message d'erreur ?
est ce que vous pouvez mettre les fichiers complets en pièce-jointe pour qu'on puisse tester ?

**Freddy3790** · 14/07/2023, 00h49

Ce n'est peut être pas bien, mais je ne sais pas me servir de la console. en tout les cas, pas de messages d'erreur dans l'IDE. concernant le offline c'est un chemin qui apparait dans le navigateur au lieu d'une adresse internet (voir capture d'écran ci-jointe) Nom : Capture ofline.PNG
Affichages : 186
Taille : 41,5 Ko

Nom : Capture ofline.PNG
Affichages : 186
Taille : 41,5 Ko

la page html

Code html :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
    <html>
        <head>
            <title> calculs chauffage</title>
            <meta charset="utf8"/>
            <link rel="stylesheet" href="../titre.css"/>
            <link rel="stylesheet" href="chauffage.css"/>
            <link rel="icon" href="../favicon.ico"/>
        </head>
        <body>
            <p id="retour"><a id="aretour" href="../../calcul_thermique.html">retour accueil</a></p>
             <button id="idretmenu" class=clretmenu>retour menu</button>
             <button id="idretSousmenu" class=clretmenu>retour menu</button>
             <br>
 
            <h1 id="ancreChauffage">calculs chauffage</h1>
            <br>
            <br>
  <!----------------------------------évaluation déperdition---------------------------->          
            <div id="divboutdeper" class="divboutmenu">
                <button id="boutdeper"class="boutmenu">&eacute;valuation des d&eacute;perditions par m&eacute;thode co&euml;fficient G</button>
            </div>
  <!----------------------------------fenêtre calcule déperdition---------------------------->          
    <div id="divcalcdeper">
            <br>
            <!--mod deper-->
            <div id="moddep">
            <button id="bclosedep">x</button>
            <p class="pdep">c'est la quantit&eacute; d'&eacute;nergie perdue durant 1 seconde d'un volume. c'est une puissance n&eacute;gative. </p>
            </div>
            <!-- modg -->	
            <div id="modg">
            <button id="bcloseg">x</button>
            <p class="pg">le co&euml;fficient G correspond &agrave; la quantit&eacute; d'&eacute;nergie perdue en 1s par 1 m&sup3; pour une variation de 1&deg;c </p>
            </div>
 
            <p>le calcul des d&eacute;perditions avec la m&eacute;thode du  co&euml;fficient G se calcule avec la formule suivante</p>
            <p class="form">Deper = (Vol x G x ( t&deg;c amb - t&deg; ext de ref))/1000</p>
            <ul class="legform">
                <li>Deper = <abbr id="lidep" title="c'est la quantit&eacute; d'&eacute;nergie perdue durant 1 seconde d'un volume. c'est une puissance négative">les déperditions</abbr> :kw ou kJ/s (kilojoule par seconde)</li>
                <li>Vol = volume : m&sup3 </li>
                <li>G = <abbr id="licoefg" title="le coëfficient G correpond &agrave; la quantité d'énergie perdue en 1s par 1 m&sup3; pour une variation de 1&deg;c">coefficient G :</abrr> w/m&sup3.&deg;c</li>
                <li>t&deg; amb = temp&eacute;rature ambiante maxi souhait&eacute;e:&deg;c</li>
                <li>t&deg; ext de ref = temp&eacute;rature ext&eacute;rieur de r&eacute;f&eacute;rence: &deg;c</li>
            </ul>
            <p id="re"></p>>toutes les cases doivent avoir une valeur, hormis bien sûr, la valeur recherch&eacute;e</p>
            <p>d&eacute;perdition = <input id="deper" step="0.01" class="innum">kW</p>
            <p>surface habitable estim&eacute;e = <input id="depinsh"  step="0.01" class="innum">m&sup2;</p>
            <p>hauteur sous plafond estim&eacute;e = <input id="depinh"  step="0.01" class="innum">m</p>
        <input id="bchcoefg" type=checkbox>
        <label class="pcoefg" >calcul du co&euml;fficient G </label><br>
        <div id="labcoefg">
            <label for="coefG" class="lab">sélectionner le coëfficient G:</label>
            <select name="G" id="coefg">
            <option value="0.0">RT 2020 &Rightarrow; 0.0 w/m&sup3.&deg;c</option>
            <option value="0.22">RT 2012 &Rightarrow; 0.22 w/m&sup3.&deg;c</option>
            <option value="0.47">BBC rénovation 2009 &Rightarrow; 0.47 w/m&sup3.&deg;c</option>
            <option value="0.58">RT 2005 gaz &Rightarrow; 0.58 w/m&sup3.&deg;c</option>
            <option value="0.87">HPE rénovation 2009 &Rightarrow; 0.87 w/m&sup3.&deg;c</option>
            <option value="0.94">RT 2005 élec &Rightarrow; 0.94 w/m&sup3.&deg;c</option>
            <option value="1.12">Ancien mal isolé &Rightarrow; 1.12 w/m&sup3.&deg;c</option>
            <option value="1.79">ancien très mal isolé &Rightarrow; 1.79 w/m&sup3.&deg;c</option>
            </select>
            <p class="source">source:<a href="https://www.infoenergie.eu/riv+ener/complements/coeff-evaluation-besoin-thermique.htm">https://www.infoenergie.eu/riv+ener/complements/coeff-evaluation-besoin-thermique.htm</a></p>
 
            <img src="tb.gif"><br><br>
            </div>
            <input id="bchtext" type=checkbox >
            <label class="pctext">calcul de la temp&eacute;rature ext&eacute;rieur minimum de r&eacute;f&eacute;rence</label><br>
            <div id="labtext">
            <label for="departement" class="lab">sélectionner le département:</label>
            <select name="depart" id="departem">
                <option value="G">01: l'Ain</option>
                <option value="D">02: l'aisne</option>
                <option value="E">03: l'Allier</option>
                <option value="E">04: les Alpes de haute-provence</option>
                <option value="G">05: les Hautes-Alpes</option>
                <option value="E">06: les Alpes Maritimes nord</option>
                <option value="A">06: les Alpe Maritimes sud</option>
                <option value="D">07: l'Ardèche</option>
                <option value="G">08: les Ardennes</option>
                <option value="C">09: l'Ariège</option>
                <option value="G">10: l'Aube</option>
                <option value="C">11: l'Aude</option>
                <option value="C">12: l'Aveyron</option>
                <option value="C">13: les Bouches du Rhône</option>
                <option value="D">14: le Calvados</option>
                <option value="E">15: le Cantal</option>
                <option value="C">16: le Charentes</option>
                <option value="B">17:la Charente-Maritime ouest</option>
                <option value="C">17: la Charente-Maritime est</option>
                <option value="D">18: le Cher</option>
                <option value="E">19: la Corèze nord</option>
                <option value="D">19: la Corèze sud</option>
                <option value="A">2A la Haute Corse et 2B la Corse du sud</option>
                <option value="G">21: les côtes d'or</option>
                <option value="B">22: les côtes d'Armor</option>
                <option value="E">23: la Creuse</option>
                <option value="C">24: la Dordogne</option>
                <option value="H">25: le Doubs</option>
                <option value="D">26: la Drôme</option>
                <option value="D">27: l'Eure</option>
                <option value="D">28: l'Eure-et-loir</option>
                <option value="B">29: le finistère</option>
                <option value="C">30: le Gard</option>
                <option value="C">31: la Haute-Garonne</option>
                <option value="C">32 le Gers</option>
                <option value="B">33:la Gironde ouest</option>
                <option value="C">33:la Gironde Est</option>
                <option value="C">34: l'Hérault</option>
                <option value="C">35: l'île-et-Vilaine</option>
                <option value="D">36: l'indre</option>
                <option value="D">37: l'Indre et Loir</option>
                <option value="G">38: l' Isère</option>
                <option value="G">39: le Jura</option>
                <option value="B">40: les Landes Ouest</option>
                <option value="C">40: les Landes Est</option>
                <option value="D">41: le Loir et Cher</option>
                <option value="G">42: la Loire</option>
                <option value="E">43: la Haute loire</option>
                <option value="B">44: la Loire Atalntique Ouest</option>
                <option value="C">44: la Loire Atalntique Est</option>
                <option value="D">45: le Loiret</option>
                <option value="D">46: le Lot</option>
                <option value="C">47: le Lot et Garonne</option>
                <option value="E">48: la Lozère</option>
                <option value="D">49: le Maine et Loire</option>
                <option value="B">50: la Manche</option>
                <option value="G">51: la Marne</option>
                <option value="H">52: la Haute Marne</option>
                <option value="D">53: la Mayenne</option>
                <option value="I">54: la Meurthe et Mozelle</option>
                <option value="H">55: la Meuse</option>
                <option value="B">56: le Morbihan</option>
                <option value="I">57: la Mozelle</option>
                <option value="G">58: la Nièvre</option>
                <option value="F">59: le Nord</option>
                <option value="D">60: l'Oise</option>
                <option value="D">61:l'Orne</option>
                <option value="F">62: Pas de Calais</option>
                <option value="E">63: le puy de dôme</option>
                <option value="C">64: les Pyrénées Atlantique</option>
                <option value="C">65: les Hautes Pyrénées</option>
                <option value="C">66: les Pyrénées Orientales Ouest</option>
                <option value="B">66: les Pyrénées Orientales Est</option>
                <option value="I">67: le Bas-Rhin</option>
                <option value="I">68: le Haut-Rhin</option>
                <option value="G">69: le Rhône</option>
                <option value="H">70: la Haute Saône</option>
                <option value="G">71: la Saône et Loire</option>
                <option value="D" selected>72: la Sarthe</option>
                <option value="G">73: la Savoie</option>
                <option value="G">74: la Haute Savoie</option>
                <option value="D">75: Paris</option>
                <option value="D">76: la Seine Maritime</option>
                <option value="D">77: la Seine e Marne</option>
                <option value="D">78: les Yvelines</option>
                <option value="D">79: les deux sèvres</option>
                <option value="F">80: la Somme</option>
                <option value="C">81: le Tarn</option>
                <option value="C">82: le Tarn et Garonne</option>
                <option value="C">83: le Var Nord</option>
                <option value="A">83: le Var Sud</option>
                <option value="D">84: le Vaucluse</option>
                <option value="B">85: la Vendée Ouest</option>
                <option value="C">85: la Vendée Est</option>
                <option value="D">86: la Vienne</option>
                <option value="E">87: la Haute Vienne</option>
                <option value="I">88: les Vosges</option>
                <option value="G">89: l'Yonne</option>
                <option value="I">90: territoire de Belfort</option>
                <option value="D">91: l'Essonne</option>
                <option value="D">92: les Hauts de Seine</option>
                <option value="D">93: Seine Saint Denis</option>
                <option value="D">94: Val de Marne</option>
                <option value="D">95: Val d'Oise</option>
            </select><br><br>
            <label for="altitude" class="lab">sélectionner le département:</label>
            <select name="altitude" id="alti">
                <option value="1" selected=>de 0 à 200m</option>
                <option value="2">de 201 à 400m</option>
                <option value="3">de 401 à 600m</option>
                <option value="4">de 601 à 800m</option>
                <option value="5">de 801 à 1000m</option>
                <option value="6">de 1001 à 1200m</option>
                <option value="7">de 1201 à 1400m</option>
                <option value="8">de 1401 à 1600m</option>
                <option value="9">de 1601 à 1800m</option>
                <option value="10">de 1801 à 2000m</option>
                <option value="11">de 2001 à 2200m</option>
            </select><br><br>
            <p>t&deg; ext de ref = <span id="paraext"></span>&deg;c</p>
            </div>
            <p>t&deg; amb =  <input id="depintamb"  step="0.01" class="innum">&deg;c</p>
            <button id="depbcalc" class="depbcalc">calculer</button><br>
           <p id="depparacalc" class="depparacalc"></p>
    </div>
 
   <!----------------------------------------estim conso énergie------------------->          
            <br>
            <div id="divboutconso" class="divboutmenu">
                <button id="boutconso"class="boutmenu">consommation d'&eacute;nergie et rendement </button>
           </div >
 
            <div id="divSousMenuConso">
                <br><br>
            <button id="checkConsoDeper" class="boutSousMenu">estimation consommation d'&eacute;nergie en fonction des d&eacute;perditions </button><br>
            <br><button id="checkConsorend" class="boutSousMenu">estimation du rendement de l'installation</button><br>
             </div>
 
        <div id="divconso">
 
            <p > le calcul suivant est un outil permettant d'estimer la quantité de chaleur consommée durant une période définie en fonction de la température extérieur, de la température ambiante, des déperditions estimées par coëfficient G et du rendement du générateur comblant les déperditions</p>
                <p id="consoPSurface">surface habitable estim&eacute;e = <input id="consoinsh"  step="0.01" class="innum">m&sup2;</p>
                <p id="consoPHauteur">hauteur sous plafond estim&eacute;e = <input id="consoinh"  step="0.01" class="innum">m</p>
 
 
            <div id="labcoefgconso">
                <label for="coefGconso" class="lab">sélectionner le coëfficient G:</label>
                <select name="Gconso" id="coefgcons" onchange="calcenerut1">
                <option value="0.0">RT 2020 &Rightarrow; 0.0 w/m&sup3.&deg;c</option>
                <option value="0.22">RT 2012 &Rightarrow; 0.22 w/m&sup3.&deg;c</option>
                <option value="0.47">BBC rénovation 2009 &Rightarrow; 0.47 w/m&sup3.&deg;c</option>
                <option value="0.58">RT 2005 gaz &Rightarrow; 0.58 w/m&sup3.&deg;c</option>
                <option value="0.87">HPE rénovation 2009 &Rightarrow; 0.87 w/m&sup3.&deg;c</option>
                <option value="0.94">RT 2005 élec &Rightarrow; 0.94 w/m&sup3.&deg;c</option>
                <option value="1.12">Ancien mal isolé &Rightarrow; 1.12 w/m&sup3.&deg;c</option>
                <option value="1.79">ancien très mal isolé &Rightarrow; 1.79 w/m&sup3.&deg;c</option>
                </select>
                <p class="source">source:<a href="https://www.infoenergie.eu/riv+ener/complements/coeff-evaluation-besoin-thermique.htm">https://www.infoenergie.eu/riv+ener/complements/coeff-evaluation-besoin-thermique.htm</a></p>
 
            </div>
            <p>température moyenne extérieur durant la période de l'estimation = <input id="consotext"  step="0.01" class="innum">&deg;c</p>
            <p>température moyenne ambiante durant la période de l'estimation = <input id="consotamb"  step="0.01" class="innum">&deg;c</p>
            <label class="pcoefg" >calcul du temps nécéssaire au transfert d'énergie </label><br>
            <p id="pconsodate">début de période d'estimation:<input type="date" id="consoStartDate"> &emsp; &emsp; fin de période d'estimation:<input type="date" id="consoEndDate"></p>
            <p id="pconsotime">nombres d'heures durant l'estimation: <input type="time" id="intimeconso"> </p>            
            <p id="outputDateConso"></p>
            <p id="outputDeperConso"></p>
            <p id="c"></p>
 
                <p>quantité de chaleur estimée nécéssaire <input id="kwhnécéss" step="0.1" class="innum">kWh</p>
            <div id="divRend">
                <div id="labRendConso">
                <label for="deremetconso" class="lab">sélectionner le générateur:</label>
                <select name="emetConso" id="emetconso" onchange="calcenerut1">
                <option value="0.93">chaudiere gaz basse t° 93%</option>
                <option value="1.05">chaudière condensation 105%</option>
                <option value="2">pompe à chaleur COP de 2</option>
                <option value="3">pompe à chaleur COP de 3</option>
                </select>             
                <div><p id="kwhconso"  class="paranote1" ></p></div>
 
                </div>
            </div>
 
         </div>
 
 <!----------------------------------------dimensionnement d'un vase------------------->          
            <br>
            <div id="divboutvase" class="divboutmenu">
                <button id="boutvase"class="boutmenu">dimensionnement d'un vase (&agrave; venir)</button>
            </div>
 
            <div id="divvase">
 
            </div>
 
            <script src='chauffage.js'></script>
        </body>
    </html>

la page js

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
/*------------------------------------------------affichage des pages menu chauffage-----------------------------------------------
  /*déclaration des pages*/
let fendeper = document.getElementById("divcalcdeper"); 
let fenconso = document.getElementById("divSousMenuConso");
let fenvase = document.getElementById("divvase");
  /*déclaration des boutons retour*/
let retourDebut = document.getElementById("retour");
let retourMenu = document.getElementById("idretmenu");
  /*déclaration des boutons titres*/
let boutDeper = document.getElementById("divboutdeper");
let boutConso = document.getElementById("divboutconso");
let boutVase = document.getElementById("divboutvase");
 
  /*conditions d'affichage du menu*/
 
     /* affichage fenêtre deper*/
 
boutDeper.addEventListener("click",function() {
  if (getComputedStyle(fendeper).display !="block") {
  fendeper.style.display = "block";
  fenconso.style.display = "none";
  fenvase.style.display = "none";
  boutVase.style.display="none";
  boutConso.style.display="none";
  retourDebut.style.display = "none";
  retourMenu.style.display = "block";
  }
});
 
     /* affichage fenêtre conso*/
boutConso.addEventListener("click",function() {
  if (getComputedStyle(fenconso).display !="block") {
  fenconso.style.display = "block";
  fendeper.style.display = "none";
  fenvase.style.display = "none";
  boutVase.style.display="none";
  boutDeper.style.display="none";
  retourDebut.style.display = "none";
  retourMenu.style.display = "block";
  }
});
     /* affichage fenêtre vase*/
boutVase.addEventListener("click",function() {
  if (getComputedStyle(fenvase).display !="block") {
  fendeper.style.display = "none";
  fenconso.style.display = "none";
  fenvase.style.display = "block";
  boutConso.style.display="none";
  boutDeper.style.display="none";
  retourDebut.style.display = "none";
  retourMenu.style.display = "block";
  }
});
    /*retour menu*/
  retourMenu.addEventListener("click",function() {
   fendeper.style.display = "none";
  fenconso.style.display = "none";
  fenvase.style.display = "none";
  retourDebut.style.display = "block";
  retourMenu.style.display = "none";
  boutDeper.style.display="block";
  boutConso.style.display="block";
  boutVase.style.display="block";
  divboutmenu.style.display="block";
    });
 
 
 
 
/*---------------------------------------coefficient G-----------------------------------------------------------------------------
/*modal deper*/
 
var moddep = document.getElementById("moddep");
var bclosedep = document.getElementById("bclosedep");
var lidep = document.getElementById("lidep");
 
lidep.addEventListener('click' , opendep);
bclosedep.addEventListener('click' , closedep);
 
function opendep(){
moddep.style.top = "800px";
}
 
function closedep(){
moddep.style.top = "-800px";
}
 
/*modal g*/
var modg = document.getElementById("modg");
var bcloseg = document.getElementById("bcloseg");
var licoefg = document.getElementById("licoefg");
 
licoefg.addEventListener('click' , openg);
bcloseg.addEventListener('click' , closeg);
 
function openg(){
modg.style.top = "800px";
}
 
function closeg(){
modg.style.top = "-800px";
}
/*mise à 0 des inputs*/
  /*déclaration des variables input*/
  var indeper = document.getElementById("deper");
  var indepsh = document.getElementById("depinsh");
  var indeph = document.getElementById("depinh");
  var indeptamb = document.getElementById("depintamb");
  /*input deperdition*/
  indeper.addEventListener("click",function(){
    document.getElementById("deper").style.color = "black";
    if (document.getElementById("deper").value.length > 0 && document.getElementById("depinsh").value.length > 0 && document.getElementById("depinh").value.length > 0 && document.getElementById("depintamb").value.length > 0)
    {
       document.getElementById("deper").value = "";
        document.getElementById("depinsh").value = "";
        document.getElementById("depinh").value = "";
        document.getElementById("depintamb").value = "";
 
    }else{
      document.getElementById("deper").value = "";
    }
    });
  /*input température ambiante*/
 
  indeptamb.addEventListener("click",function(){
   indeptamb.style.color = "black";
    if (indeper.value.length > 0 && indepsh.value.length > 0 && indeph.value.length > 0 && indeptamb.value.length > 0)
    {
       indeper.value = "";
        indepsh.value = "";
        indeph.value = "";
        indeptamb.value = "";
 
    }else{
      indeptamb.value = "";
    }
    });
  /*input hauteur*/
 
  indeph.addEventListener("click",function(){
   indeph.style.color = "black";
    if (indeper.value.length > 0 && indepsh.value.length > 0 && indeph.value.length > 0 && indeptamb.value.length > 0)
    {
       indeper.value = "";
        indepsh.value = "";
        indeph.value = "";
        indeptamb.value = "";
 
    }else{
      indeph.value = "";
    }
    });
  /*input surface*/
 
  indepsh.addEventListener("click",function(){
   indepsh.style.color = "black";
    if (indeper.value.length > 0 && indepsh.value.length > 0 && indeph.value.length > 0 && indeptamb.value.length > 0)
    {
       indeper.value = "";
        indepsh.value = "";
        indeph.value = "";
        indeptamb.value = "";
 
    }else{
      indepsh.value = "";
    }
    });
/*calcul deperdition coefficient G*/
 
let bchcoefg = document.getElementById("bchcoefg");
let incheccoefg ;
 
let labcoefg = document.getElementById("labcoefg");
 
bchcoefg.addEventListener("click" , function(){
  if (bchcoefg.checked == true){
 
    labcoefg.style.display = "none";
    incheccoefg = 1;
 
  }else{
 
    labcoefg.style.display = "block";
    incheccoefg = 2;
 
  }
});
 
/*condition d'affichage température ext*/
let bchtext = document.getElementById("bchtext");
let inchetext ;
 
let labtext = document.getElementById("labtext");
 
bchtext.addEventListener("click" , function(){
  if (bchtext.checked == true){
 
    labtext.style.display = "none";
    inchetext = 1;
 
  }else{
 
    labtext.style.display = "block";
    inchetext = 2;
 
  }
});
 
let cldepart = document.getElementById("departem");
cldepart.addEventListener("input" , affext);
 
let clalti = document.getElementById("alti");
clalti.addEventListener("input" , affext);
 
let text = -7;
document.getElementById("paraext").innerHTML = text;
let textnull;
 
 
 
function affext(){
  textnull = 2;
if(document.getElementById("departem").value == "A" && document.getElementById("alti").value == 1)
{
   text = -2;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "B" && document.getElementById("alti").value == 1 || document.getElementById("departem").value == "A" && document.getElementById("alti").value == 2)
{
  text = -4;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "B" && document.getElementById("alti").value == 2 || document.getElementById("departem").value == "C" && document.getElementById("alti").value == 1)
{
  text = -5;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "A" && document.getElementById("alti").value == 3 || document.getElementById("departem").value == "B" && document.getElementById("alti").value == 3 || document.getElementById("departem").value == "C" && document.getElementById("alti").value == 2)
{
  text = -6;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "B" && document.getElementById("alti").value == 4 || document.getElementById("departem").value == "C" && document.getElementById("alti").value == 3 || document.getElementById("departem").value == "D" && document.getElementById("alti").value == 1)
{
  text = -7;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "A" && document.getElementById("alti").value == 4 || document.getElementById("departem").value == "B" && document.getElementById("alti").value == 5 || document.getElementById("departem").value == "C" && document.getElementById("alti").value == 4  || document.getElementById("departem").value == "D" && document.getElementById("alti").value == 2  || document.getElementById("departem").value == "E" && document.getElementById("alti").value == 1)
{
  text = -8;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "B" && document.getElementById("alti").value == 6  || document.getElementById("departem").value == "C" && document.getElementById("alti").value == 5 || document.getElementById("departem").value == "D" && document.getElementById("alti").value == 3 || document.getElementById("departem").value == "E" && document.getElementById("alti").value == 2 || document.getElementById("departem").value == "F" && document.getElementById("alti").value == 1)
{
  text = -9;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "A" && document.getElementById("alti").value == 5 || document.getElementById("departem").value == "B" && document.getElementById("alti").value == 7 ||document.getElementById("departem").value == "C" && document.getElementById("alti").value == 6 || document.getElementById("departem").value == "F" && document.getElementById("alti").value == 2 || document.getElementById("departem").value == "G" && document.getElementById("alti").value == 1)
{
  text = -10;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "C" && document.getElementById("alti").value == 7 || document.getElementById("departem").value == "D" && document.getElementById("alti").value == 4 || document.getElementById("departem").value == "E" && document.getElementById("alti").value == 3 || document.getElementById("departem").value == "F" && document.getElementById("alti").value == 3 ||document.getElementById("departem").value == "G" && document.getElementById("alti").value == 2)
{
  text = -11;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "A" && document.getElementById("alti").value == 6 || document.getElementById("departem").value == "C" && document.getElementById("alti").value == 8 || document.getElementById("departem").value == "F" && document.getElementById("alti").value == 4 || document.getElementById("departem").value == "H" && document.getElementById("alti").value == 1)
{
  text = -12;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "C" && document.getElementById("alti").value == 9 || document.getElementById("departem").value == "D" && document.getElementById("alti").value == 5 || document.getElementById("departem").value == "E" && document.getElementById("alti").value == 4 || document.getElementById("departem").value == "F" && document.getElementById("alti").value == 5 || document.getElementById("departem").value == "G" && document.getElementById("alti").value == 3 || document.getElementById("departem").value == "H" && document.getElementById("alti").value == 2)
{
  text = -13;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "A" && document.getElementById("alti").value == 7 || document.getElementById("departem").value == "C" && document.getElementById("alti").value == 10 || document.getElementById("departem").value == "D" && document.getElementById("alti").value == 6 || document.getElementById("departem").value == "G" && document.getElementById("alti").value == 4)
{
  text = -14;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "C" && document.getElementById("alti").value == 11 || document.getElementById("departem").value == "D" && document.getElementById("alti").value == 7 || document.getElementById("departem").value == "E" && document.getElementById("alti").value == 5 || document.getElementById("departem").value == "H" && document.getElementById("alti").value == 3 || document.getElementById("departem").value == "I" && document.getElementById("alti").value == 1 || document.getElementById("departem").value == "I" && document.getElementById("alti").value ==2)
{
  text = -15;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "A" && document.getElementById("alti").value == 8)
{
  text = -16;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "E" && document.getElementById("alti").value == 6 || document.getElementById("departem").value == "G" && document.getElementById("alti").value == 5 || document.getElementById("departem").value == "H" && document.getElementById("alti").value == 4)
{
  text = -17;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "A" && document.getElementById("alti").value == 9)
{
  text = -18;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "E" && document.getElementById("alti").value == 7 || document.getElementById("departem").value == "G" && document.getElementById("alti").value == 6 || document.getElementById("departem").value == "H" && document.getElementById("alti").value == 5 || document.getElementById("departem").value == "I" && document.getElementById("alti").value == 3)
{
  text = -19;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "A" && document.getElementById("alti").value == 10)
{
  text = -20;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "E" && document.getElementById("alti").value == 8 || document.getElementById("departem").value == "G" && document.getElementById("alti").value == 7 || document.getElementById("departem").value == "H" && document.getElementById("alti").value == 6 || document.getElementById("departem").value == "I" && document.getElementById("alti").value == 4)
{
  text = -21;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "E" && document.getElementById("alti").value == 9 || document.getElementById("departem").value == "G" && document.getElementById("alti").value == 8 || document.getElementById("departem").value == "H" && document.getElementById("alti").value == 7 || document.getElementById("departem").value == "I" && document.getElementById("alti").value == 5)
{
  text = -23;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "G" && document.getElementById("alti").value == 9 || document.getElementById("departem").value == "H" && document.getElementById("alti").value == 8 || document.getElementById("departem").value == "I" && document.getElementById("alti").value == 6)
{
  text = -24;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "E" && document.getElementById("alti").value == 10 || document.getElementById("departem").value == "G" && document.getElementById("alti").value == 10 || document.getElementById("departem").value == "I" && document.getElementById("alti").value == 7)
{
  text = -25;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "E" && document.getElementById("alti").value == 11)
{
   text = -27;
  document.getElementById("paraext").innerHTML = text;
 
 
}else if(document.getElementById("departem").value == "G" && document.getElementById("alti").value == 11)
{
  text = -29;
  document.getElementById("paraext").innerHTML = text;
 
 
}else
{
  text = "pas de valeur de temp&eacute;rature donn&eacute;e correpondante à cette altitude" ;
  document.getElementById("paraext").innerHTML = text;
  textnull = 1;
}
}
 
var calcdep = document.getElementById("depbcalc");
calcdep.addEventListener('click', calculerdep);
 
function calculerdep(){
/*déclaration de valeurs*/
var insh = document.getElementById('depinsh').value;
var inh = document.getElementById('depinh').value;
var intamb = document.getElementById('depintamb').value;
var deper = document.getElementById('deper').value;
var coefg = document.getElementById('coefg').value;
 
 
/*formule déperdition*/
 
let depcalc =  ( ( inh * insh ) * coefg * ( intamb - text ) ) / 1000 ;
/*formule hauteur*/
 
let hautcalc = ( deper * 1000 ) / ( insh * coefg * ( intamb - text ) );
/*formule surface*/
 
let surfcalc = ( deper * 1000 ) / ( inh * coefg * ( intamb - text ) );
/*formule coefG*/
 
let coefgcalc = ( deper * 1000 ) / ( ( inh * insh ) * ( intamb - text ) );
/*formule température ambiante*/
 
let tempambprov =  ( deper * 1000 ) / ( ( inh * insh ) * coefg );
 
/*formule température extérieur*/
 
let tempextcalc = intamb - ( ( deper * 1000 ) / ( ( inh * insh ) * coefg ) ) ;
 
 
/*conditions d'affichage*/
 
 
 
  if(textnull == 1) /* à l'origine = 2, passe en 1 si pas de temp ext dans tableau voir ligne 200*/
  {
 
   alert("la température extérieur minimal de référence n'est pas cohérente. Vérifier le choix du département et de l'altitude");
  }
 
  else if(document.getElementById('depinsh').value.length > 0 && document.getElementById('depinh').value.length > 0  && document.getElementById('depintamb').value.length > 0 && document.getElementById('deper').value.length == 0)
  {
   indeper.value =  depcalc.toFixed(2);
  indeper.style.color = "red"; 
  }
 
  else if(document.getElementById('depinsh').value.length > 0 && document.getElementById('deper').value.length > 0 && document.getElementById('depintamb').value.length > 0 && document.getElementById('depinh').value.length == 0)
  {
    indeph.value =  hautcalc.toFixed(2);
  indeph.style.color = "red"; 
  }
 
  else if(document.getElementById('deper').value.length > 0 && document.getElementById('depinh').value.length > 0 && document.getElementById('depintamb').value.length > 0 && document.getElementById('depinsh').value.length == 0)
  {
     indepsh.value =  surfcalc.toFixed(2);
  indepsh.style.color = "red"; 
  document.getElementById("depparacalc").innerHTML = ("la surface calcul&eacute;e est de " + surfcalc.toFixed(2) + " m&sup2;");
  }
 
  else if(document.getElementById('depinsh').value.length > 0 && document.getElementById('depinh').value.length > 0 && document.getElementById('deper').value.length > 0 && document.getElementById('depintamb').value.length > 0  &&   incheccoefg == 1)
  {
  document.getElementById("depparacalc").innerHTML = ("le co&euml;fficient G est estimé à " + coefgcalc.toFixed(2) + "  w/m&sup3.&deg;c");
  }
 
  else if(document.getElementById('depinsh').value.length > 0 && document.getElementById('depinh').value.length > 0 && document.getElementById('deper').value.length > 0 && document.getElementById('depintamb').value.length == 0)
  {
    if(document.getElementById("paraext").value > 0)
    {
      let tempambcalc = tempambprov + text;
      let tempambcalc2 = Math.round(tempambcalc*100)/100;
      indeptamb.value =  tempambcalc2.toFixed(2);
       indeptamb.style.color = "red"; 
      }else
      {
        text = text * -1;
      let tempambcalc1 = tempambprov - text;
       indeptamb.value =  tempambcalc1.toFixed(2);
       indeptamb.style.color = "red";   
      }
 
  }
 
  else if(document.getElementById('depinsh').value.length > 0 && document.getElementById('depinh').value.length > 0 && document.getElementById('deper').value.length > 0 && document.getElementById('depintamb').value.length > 0 && inchetext == 1)
  {
  document.getElementById("depparacalc").innerHTML = ("la temp&eacute;rature extérieur de r&eacute;f&eacute;rence calcul&eacute;e est de " + tempextcalc.toFixed(2) + " &deg;c");
  }
 
  else if(document.getElementById('depinsh').value.length > 0 && document.getElementById('deper').value.length > 0 && document.getElementById('depinh').value.length > 0 && document.getElementById('paraext').value.length > 0 && document.getElementById('depintamb').value.length > 0)
  {
   alert("la valeur recherchée ne peut être renseignée");
  }
 
  else  
 {
  alert("il vous manque au moins une valeur");
   }
}
/*---------------------------------------Estimation d'energie consommée---------------------------------------------*/
/*déclaration affichage */
 
 
  /*affichage conso d'énergie absorbée*/
  document.getElementById("checkConsoDeper").addEventListener("click", function() {
    document.getElementById("divconso").style.display="block";
    document.getElementById("divRend").style.display="block";
    document.getElementById("checkConsorend").style.display="none";
    document.getElementById("idretmenu").style.display="none";
    document.getElementById("idretSousmenu").style.display="block";
 
 
  });
  /*affichage rendement appareil*/
  document.getElementById("checkConsorend").addEventListener("click", function() {
 
     document.getElementById("divconso").style.display="block";
     document.getElementById("divRend").style.display ="none";
     document.getElementById("checkConsoDeper").style.display ="none";
     document.getElementById("idretmenu").style.display="none";
    document.getElementById("idretSousmenu").style.display="block";
    });
    /*affichage ret sous menu*/
    document.getElementById("idretSousmenu").addEventListener("click", function() {
 
       document.getElementById("divconso").style.display="none";
       document.getElementById("checkConsoDeper").style.display ="block";
       document.getElementById("checkConsorend").style.display="block";
       document.getElementById("idretmenu").style.display="block";
       document.getElementById("idretSousmenu").style.display="none";
      });
 
/* fonctions calcules des différents éléments de la formule */
 
      /* 1 déperditions */
 
 
 
  document.getElementById("consoStartDate").addEventListener("change", function() {
       document.getElementById("pconsotime").style.display = "none";
        document.getElementById("outputDateConso").style.display = "none";
 
  if (document.getElementById("consoStartDate").value == document.getElementById("consoEndDate").value) {
      document.getElementById("pconsotime").style.display = "block";
 
  } else if (document.getElementById("consoStartDate").value == 0 || document.getElementById("consoEndDate").value==0) {
 
 
  }else if (document.getElementById("consoStartDate").value < document.getElementById("consoEndDate").value) {
    document.getElementById("outputDateConso").style.display = "block";
    calculDate();
  }else if(document.getElementById("consoStartDate").value > document.getElementById("consoEndDate").value) {
    alert("choisissez une date de fin de contrôle postérieur à la date de débuts");
  }});
 
 
        /*affichage écoute date de fin*/
  document.getElementById("consoEndDate").addEventListener("change", function() {
 
  document.getElementById("pconsotime").style.display = "none";
  document.getElementById("outputDateConso").style.display = "none";
 
  if (document.getElementById("consoStartDate").value == document.getElementById("consoEndDate").value) {
    document.getElementById("pconsotime").style.display = "block";
 
  } else if (document.getElementById("consoStartDate").value == 0 || document.getElementById("consoEndDate").value==0) {
 
 
  }else if (document.getElementById("consoStartDate").value < document.getElementById("consoEndDate").value) {
    document.getElementById("outputDateConso").style.display = "block"; 
    calculDate();
  }else if(document.getElementById("consoStartDate").value > document.getElementById("consoEndDate").value) {
    alert("choisissez une date de fin de contrôle postérieur à la date de débuts");
  }});
 
 
 
 
 
 
         /*écoute temp, surface, hauteur, coefg, rend*/
         var consDeper=document.getElementById("ConsoDeperConnus");
         var consSurf=document.getElementById("consoinsh");
         var consHaut=document.getElementById("consoinh");
         var consCoefg=document.getElementById("coefgcons");
         var consTamb=document.getElementById("consotamb");
         var consText=document.getElementById("consotext");
         var startEc =document.getElementById("consoStartDate");
         var endEc = document.getElementById("consoEndDate");
         var consEnerUt=document.getElementById("kwhnécéss");
         var consEnerAb=document.getElementById("kwhconso");
         var consRendGene=document.getElementById("emetconso");
 
         startEc.addEventListener("input",calcenerut1);
         endEc.addEventListener("input",calcenerut1);
         /*consDeper.addEventListener("input",calcenerut1)*/;
         consSurf.addEventListener("input",calcenerut1);
         consHaut.addEventListener("input",calcenerut1);
         consCoefg.addEventListener("change",calcenerut1);
         consTamb.addEventListener("input",calcenerut1);
         consText.addEventListener("input",calcenerut1);
         startEc.addEventListener("input",calcenerut1);
         endEc.addEventListener("input",calcenerut1);
         consEnerUt.addEventListener("input",calcenerut1);
         consEnerAb.addEventListener("input",);
         /*consRendGene.addEventListener("change",calcenerut1);*/
 
 
         /*calcul énergie consommée*/
 
 
         function calcenerut1() {
 
          var start = new Date(document.getElementById("consoStartDate").value);
          var end = new Date(document.getElementById("consoEndDate").value);
 
 
           var timeDif = end - start;
           var timeDay = Math.ceil(timeDif / (1000 * 3600 * 24));
 
           document.getElementById("outputDateConso").innerHTML = timeDay + "jour(s)";
 
          var valConsSurf=(consSurf.value);
          var valconsHaut=(consHaut.value);
          var valConsCoefg=(consCoefg.value);
          var valconsTamb=(consTamb.value);
          var valconsText=(consText.value);
          var valconsrend=(consRendGene.value);
 
 
          /*const valconstimeDif=parseFloat(timeDif.value)||0;*/
 
 
 
            var puissUtil= ((valConsSurf * valconsHaut) * valConsCoefg * (valconsTamb - valconsText)) / 1000;
 
 
 
          var consoUtil=((puissUtil*timeDif)*0.0002777778)
          document.getElementById("kwhnécéss").value= consoUtil ;
 
 
          var consoAb = consoUtil/valconsrend;
          var consoAbMaxi = ((consoAb * 10)/100)+consoAb;
          var consoAbMini =consoAb-((consoAb * 10)/100);
          document.getElementById("kwhconso").innerHTML= "la consommation aborbée durant les"+ timeDay+ "jours, est estim&eacute;e entre:"+consoAbMini.toFixed(2)  + "kwh et "+consoAbMaxi.toFixed(2) +"kwh " + "test select rende"+consRendGene.value +"et test select coefG "+ valConsCoefg;
 
 
         };

le lien ci-contre donne un aperçu du site, mais la parti concernée n'est pas dedans https://maintenance-thermique.neocities.org/

**mathieu** · 14/07/2023, 21h19

Envoyé par Freddy3790

je ne sais pas me servir de la console

il suffit de lire ce qui est affiché. là avec le code de votre message précédent, il y a un message d'erreur sur la ligne 580.

et une fois que cette erreur est corrigée et que la ligne d'après est décommentée, votre code est bien lancé quand on modifie le choix du dernier menu déroulant avec l'id "emetconso".

**Freddy3790** · 14/07/2023, 23h09

Bonsoir Mathieu,

vous ne pouvez pas savoir à quel point je suis déçu de vous avoir déranger et avoir gaspiller votre temps et votre énergie pour ça. Il y avait bien une erreur juste devant mon nez que je ne soupçonnais pas. Cela me servira de leçon.

au 1er abord, je ne comprenais pas votre histoire d'erreur en ligne 580, il n'y avait rien d'afficher dans la console de VSC. Puis on ne sait par quel miracle, une lueur j'ai remis l'erreur et j'ai été voir dans le outils de développements du navigateur et là je retrouve l'erreur. J'aurais au moins appris cela.

Je vous suis à la fois reconnaissant de m'avoir ouvert le yeux, tout en vous présentant mes excuses. Je reste persuadé que c'est quelque chose que j'aurais dû trouver tout seul.

Jusque là une telle erreur rendait totalement inopérant les actions du fichiers JS .

Encore 1000 merci, et je serais plus vigilant avant de vous déranger à nouveau.

cordialement,

**mathieu** · 15/07/2023, 01h45

il n'y a pas de souci, les forums d'entraide sont là pour ça.

au passage j'en profite pour rajouter un 2e conseil : quand le code ne produit pas le résultat prévu, n'hésitez pas a afficher la valeurs de toutes les variables utilisées. cela est valable dans n'importe quel langage de programmation et en javascript vous pouvez utiliser console.log(variable); qui affichera le résultat dans la console de développement.

**Freddy3790** · 15/07/2023, 11h31

j'en prend également bonne note.

Encore merci!

Ecouter les événements d'un SELECT

JavaScript

Discussions similaires

Partager

Partager