Discussion :

[Freddy3790]

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]

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]

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]

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]

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]

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 ?