Application chauffage maison

**cbouchet** · 17/02/2014, 16h21

Bonjour,

je tente de programmer une appli qui me calcule la puissance nécessaire pour un radiateur en fonction du type de construction et de la pièce.

Code 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
<html>
<head>
<title>Calcul de déperditions</title>
<script type="text/javascript" src="fonctions.js">
</script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all"/>
</head>
 
<body>
<center><h1>Calcul rapide des déperditions</h1></center>
<form id="monFormulaire">
<!--Tableau-->
<!--Titre des colonnes-->
<table id="montableau" border=3 cellpadding=10>
<tr>
  <th id="construction">Type de construction</th>
  <th id="pieces">Type de pièce</th>
  <th id="temppiece">Température pièce</th>
  <th id="longueurpiece">Longueur pièce</th>
  <th id="largeurpiece">Largeur pièce</th>
  <th id="hauteurpiece">Hauteur pièce</th>
  <th id="resultat">Résultat</th>
</tr>
<!--Contenu des colonnes-->
<tr>
  <td><select id="codeconstr" name="codeconstr"></select></td>
  <td><select id="codepiece" name="codepiece"></select></td>
  <td><input class="nombre" type="text" id="temperature" name="temp"/></td>
  <td><input class="nombre" type="text" id="longueur" name="long"/></td>
  <td><input class="nombre" type="text" id="largeur" name="large"/></td>
  <td><input class="nombre" type="text"  id="hauteur" name="haut"/></td>
  <td><p id="RESULT_0" class="resultat"></p></td>
  <td><input type="button" id="bouton" value="Calculer" name="Calculer" onclick="calcul()" /></td>
</tr>
</table>  
<center>
  <br />
    <input type="button" id="bouton" value="Ajouter une ligne" onclick="addLigne()" />    
    <br /><br />
</form>
</body>
</html>

Code 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
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
var coefpiece=1;
function addLigne()
{
    // Variable d'insertion de nouvelle ligne
    var ligne       = montableau.insertRow(-1);
    // On attribue un numero pour chaque ligne
    var lNum        = 0;
    lNum            = montableau.getElementsByTagName("tr").length;
    if (lNum > 0)
        lNum--;
    // On cree les nouvelles cellules
    var cellule2    = document.createElement("td");
    var cellule3    = document.createElement("td");
    var cellule4    = document.createElement("td");
    var cellule5    = document.createElement("td");
    var cellule6    = document.createElement("td");
    var cellule7    = document.createElement("td");
    var cellule8    = document.createElement("td");
    var cellule9    = document.createElement("td");
    var cellule10    = document.createElement("td");
    // On definit les elements des cellules
    // Recuperation des listes
    var codeConstr   = null;
    try{
        codeConstr = document.createElement('<select name="codeconstr' + num.toString() + '>');
    }
    catch(e){
    }
    if (!codeConstr){
        codeConstr = document.createElement("select");
        codeConstr.name="codeconstr" + lNum.toString();
        codeConstr.id    ="codeconstr";
        codeConstr.value = "1";
    }
    var codePiece   = null;
    try{
        codePiece = document.createElement('<select name="codepiece' + num.toString() + '>');
    }
    catch(e){
    }
 
    if (!codePiece){
        codePiece = document.createElement("select");
        codePiece.name="codepiece" + lNum.toString();
        codePiece.id    ="codepiece";
        codePiece.value = "1";
    }
    var temperature = document.createElement("input");
    temperature.className="nombre";
    temperature.id="temperature";
    temperature.name="temp" + lNum.toString();
    temperature.value = "";
    var LongueurPiece = document.createElement("input");
    LongueurPiece.className="nombre";
    LongueurPiece.id="longueur";
    LongueurPiece.name="long" + lNum.toString();
    LongueurPiece.value = "";
    var LargeurPiece = document.createElement("input");
    LargeurPiece.className="nombre";
    LargeurPiece.id="largeur";
    LargeurPiece.name="large" + lNum.toString();
    LargeurPiece.value = "";
    var Hauteur = document.createElement("input");
    Hauteur.className="nombre";
    Hauteur.id="hauteur";
    Hauteur.name="haut" + lNum.toString();
    Hauteur.value = "";
    // Resultat
    var resultat = document.createElement("p");
    resultat.id="RESULT_" + lNum.toString();
    resultat.style.color="#DE1F1F";
    resultat.style.textAlign="center";
    // Les boutons
    var calculer = document.createElement("input");
    calculer.type="button";
    calculer.id="bouton";
    calculer.value="Calculer";
    calculer.name="Calculer"+lNum.toString();;
    calculer.onclick = function() { calcul(lNum.toString()) };
    var supprimer = document.createElement("input");
    supprimer.type="image";
    supprimer.src="supprimer.png";
    supprimer.name="SupLigne"+lNum.toString();
    supprimer.className="supprimer";
    supprimer.onclick= function () { deleteRow(this) ;};
    // On associe les elements aux cellules
    cellule2.appendChild(codeConstr);
    cellule3.appendChild(codePiece);
    cellule4.appendChild(temperature);
    cellule5.appendChild(LongueurPiece);
    cellule6.appendChild(LargeurPiece);
    cellule7.appendChild(Hauteur);
    cellule8.appendChild(resultat);
    cellule9.appendChild(calculer);
    cellule10.appendChild(supprimer);
    // On associe les cellules a la nouvelle ligne
    ligne.appendChild(cellule2);
    ligne.appendChild(cellule3);
    ligne.appendChild(cellule4);
    ligne.appendChild(cellule5);
    ligne.appendChild(cellule6);
    ligne.appendChild(cellule7);
    ligne.appendChild(cellule8);
    ligne.appendChild(cellule9);
    ligne.appendChild(cellule10);
    ListePut(lNum.toString());
}
function remplircases(){
//  Options du SELECT CONSTRUCTION
var Construction = new Array();
Construction[0] = new Array("Construction", "Construction");
Construction[1] = new Array("Rénovation", "Rénovation");
var myObj1 = document.getElementById('codeconstr');
for(var j=0; j<Construction.length; j++) 
{
//Création d'un nouvel Option
var myOption1 = new Option(Construction[j][0], Construction[j][1]);
//Ajout de l'option dans le select
myObj1.options[myObj1.length] = myOption1;
//<option value="Option1">Valeur1</option>
}
//  Options du SELECT PIECES
var Pieces = new Array();
Pieces[0] = new Array("Chambre", "Chambre");
Pieces[1] = new Array("Cuisine", "Cuisine");
Pieces[2] = new Array("Salon", "Salon");
Pieces[3] = new Array("Salle de bain", "Salle de bain");
Pieces[4] = new Array("Hall", "Hall");
Pieces[5] = new Array("WC", "WC");
Pieces[6] = new Array("Bureau", "Bureau");
var myObj = document.getElementById('codepiece');
for(var i=0; i<Pieces.length; i++){
//Création d'un nouvel Option
var myOption = new Option(Pieces[i][0], Pieces[i][1]);
//Ajout de l'option dans le select
myObj.options[myObj.length] = myOption;
//<option value="Option1">Valeur1</option>
}
}
window.onload=remplircases;
function coefficient() {
var maison = document.forms('monFormulaire').elements["codeconstr"].value;
if (maison =="Construction") {nouvelle();}
else { ancienne();}
document.write(maison,"<p>");
document.write(piece,"<p>");
}
var piece = document.getElementsByName("codepiece").value;
function nouvelle() {
switch(piece) {
case "chambre" : coefpiece=60; break;
case "bureau" : coefpiece=62,5; break;
case "salle de bain" : coefpiece=75; break;
case "salon" : coefpiece=67,5; break;
case "hall" : coefpiece=65; break;
case "wc" : coefpiece=65; break;
case "cuisine" : coefpiece=65; break;
}
}
function ancienne(){
switch(piece) {
case "chambre" : coefpiece=48; break;
case "bureau" : coefpiece=52; break;
case "salle de bain" : coefpiece=60; break;
case "salon" : coefpiece=54; break;
case "hall" : coefpiece=52; break;
case "wc" : coefpiece=52; break;
case "cuisine" : coefpiece=52; break;
}
}
// Suppression d'une ligne 
function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById('montableau').deleteRow(i);
}
// Calcul de la puissance
function calcul() {
    coefficient();
    var temp1 = (document.getElementsByName("long").value * document.getElementsByName("large").value * document.getElementsByName("haut").value * coefpiece * 0.86 * 100)/100;
    //document.getElementById("RESULT_").value= temp1;
    document.write(coefpiece);
    document.write(temp1);
}

Premier problème: lors de l'ajout d'une ligne, les 2 select n'affiche plus rien

Deuxième problème : Je n'arrive pas à récupérer la valeur de l'option "pièce" et donc pas le "coefpiece".

Troisième problème : je n'arrive pas à afficher le résultat dans sa cellule.

Pouvez-vous m'aider svp?

Merci d'avance.

**Darkaurora** · 17/02/2014, 17h49

Premier problème:

On ne le répétera jamais assez je pense, un ID doit être unique donc ta fonction remplircases ne fonctionnera que sur la première occurrence de l'ID codeconstr & codepiece, soit il faut utiliser les noms que tu as attribué ou alors des classes.

Deuxièmement tu n'appelles pas la fonction remplircases a la fin de ta fonction addLigne à moins que la fonction ListePut fait le même travail, mais impossible a vérifier car pas de code.

Pour le deuxième problème je pense (je ne suis vraiment pas certains), que :

Code :

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

1
2
3
4
5
6
7
8
9
 
switch(piece) {
case "chambre" : coefpiece=48; break;
case "bureau" : coefpiece=52; break;
case "salle de bain" : coefpiece=60; break;
case "salon" : coefpiece=54; break;
case "hall" : coefpiece=52; break;
case "wc" : coefpiece=52; break;
case "cuisine" : coefpiece=52; break;

lorsque les valeurs du select peuvent être:

Chambre
Bureau
Salle de bain
Salon
Hall
WC

ne fonctionnera pas. A essayer donc.

**NoSmoking** · 17/02/2014, 22h09

Bonjour et bienvenue sur DVP.
Nous ne reviendrons pas sur le fait qu'une ID doit être unique et que l'on a pas forcément besoin de celle ci pour atteindre un objet.

Il existe une autre approche abordée dans cette discussion, Calcul automatique dans tableau dynamique.

Une solution passe par le clonage de la première ligne avant remplissage, sur le onload par exemple puisque tu t'en sers.

Donc sur base du HTML suivant

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
<table id="montableau" border=3 cellpadding=10>
<tr>
  <th>Type de construction</th>
  <th>Type de pièce</th>
  <th>Température pièce</th>
  <th>Longueur pièce</th>
  <th>Largeur pièce</th>
  <th>Hauteur pièce</th>
  <th>Résultat</th>
</tr>
<tr>
  <td>
    <select>
      <option value="0">Construction</option>
      <option value="1">Rénovation</option>
    </select>
  </td>
  <td>
    <select>
      <option value="60.0,48">Chambre</option>
      <option value="65.0,52">Cuisine</option>
      <option value="67.5,54">Salon</option>
      <option value="75.0,60">Salle de bain</option>
      <option value="65.0,52">Hall</option>
      <option value="65.0,52">WC</option>
      <option value="62.5,52">Bureau</option>
    </select>
  </td>
  <td><input type="text" class="nombre"></td>
  <td><input type="text" class="nombre"></td>
  <td><input type="text" class="nombre"></td>
  <td><input type="text" class="nombre"></td>
  <td><span class="resultat"></span></td>
  <td><input type="button" onclick="calcul(this)" value="Calculer"></td>
</tr>
</table>
<input type="button" value="Ajouter une ligne" onclick="addLigne()">

exit les NAMEs, à rétablir si tu dois soumettre ton formulaire, et IDs.

Sur le bouton de "calcul" la fonction attachée reçoit l'objet en paramètre via le this.

Les SELECTs ont des values représentatives des valeurs à utiliser.
Pour le second SELECT on utilise une chaine avec des données séparées par une virgule, la 1_st valeur étant pour les construction la 2_nd pour les rénovations, un simple split(',') permettra de les récupérer.

Sur le onload il te faut maintenant récupérer un clone de la 2_nd ligne.

Code :

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

1
2
3
4
5
var oTable, oClone;
window.onload = function(){
  oTable = document.getElementById('montableau');
  oClone = oTable.rows[1].cloneNode(true);
}

La fonction addLigne devient des plus simple

Code :

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

1
2
3
function addLigne(){
  oTable.tBodies[0].appendChild( oClone.cloneNode(true));
}

maintenant la fonction de calcul est à peine plus compliquée

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
function calcul( obj){
  // recherche TD parente de l'input (obj) passé en paramètre
  var oTD = obj.parentNode;
  // recherche TR parente de la TD
  var oTR = oTD.parentNode;
  // récup des données
  var consPiece = parseInt(oTR.cells[0].firstChild.value);
  var typePiece = oTR.cells[1].firstChild.value;
  var tempPiece = parseFloat(oTR.cells[2].firstChild.value)||0;
  var longPiece = parseFloat(oTR.cells[3].firstChild.value)||0;
  var largPiece = parseFloat(oTR.cells[4].firstChild.value)||0;
  var hautPiece = parseFloat(oTR.cells[5].firstChild.value)||0;
  var oResult   = oTR.cells[6].firstChild;
  // récup du coeff.
  var coeff = typePiece.split(',')[constPiece];
  // prêt pour le calcul
  oResult.innerHTML = longPiece * largPiece * hautPiece *coeff;
}

Vérifie quand même la formule de calcul.

Le code complet mis bout à bout

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Application chauffage maison</title>
<style>
table{
  border:1px solid #888;
  border-collapse:separate;
}
th, td{
  border: 1px solid #CCC;
  empty-cells:show;
}
th{
 background:#EEE;
}
</style>
<script>
var oTable, oClone;
function calcul( obj){
  // recherche TD parente de l'input (obj) passé en paramètre
  var oTD = obj.parentNode;
  // recherche TR parente de la TD
  var oTR = oTD.parentNode;
  // récup des données
  var constPiece = parseInt(oTR.cells[0].firstChild.value);
  var typePiece = oTR.cells[1].firstChild.value;
  var tempPiece = parseFloat(oTR.cells[2].firstChild.value)||0;
  var longPiece = parseFloat(oTR.cells[3].firstChild.value)||0;
  var largPiece = parseFloat(oTR.cells[4].firstChild.value)||0;
  var hautPiece = parseFloat(oTR.cells[5].firstChild.value)||0;
  var oResult   = oTR.cells[6].firstChild;
  // récup du coeff.
  var coeff = typePiece.split(',')[constPiece];
  // prêt pour le calcul
  oResult.innerHTML = longPiece * largPiece * hautPiece *coeff;
}
function addLigne(){
  oTable.tBodies[0].appendChild( oClone.cloneNode(true));
}
window.onload = function(){
  oTable = document.getElementById('montableau');
  oClone = oTable.rows[1].cloneNode(true);
}
</script>
</head>
<body>
<table id="montableau">
<tr>
  <th>Type de construction</th>
  <th>Type de pièce</th>
  <th>Température pièce</th>
  <th>Longueur pièce</th>
  <th>Largeur pièce</th>
  <th>Hauteur pièce</th>
  <th>Résultat</th>
  <th></th>
</tr>
<tr>
  <td>
    <select>
      <option value="0">Construction</option>
      <option value="1">Rénovation</option>
    </select>
  </td>
  <td>
    <select>
      <option value="60.0,48">Chambre</option>
      <option value="65.0,52">Cuisine</option>
      <option value="67.5,54">Salon</option>
      <option value="75.0,60">Salle de bain</option>
      <option value="65.0,52">Hall</option>
      <option value="65.0,52">WC</option>
      <option value="62.5,52">Bureau</option>
    </select>
  </td>
  <td><input type="text" class="nombre"></td>
  <td><input type="text" class="nombre"></td>
  <td><input type="text" class="nombre"></td>
  <td><input type="text" class="nombre"></td>
  <td><span class="resultat"></span></td>
  <td><input type="button" onclick="calcul(this)" value="Calculer"></td>
</tr>
</table>
<input type="button" value="Ajouter une ligne" onclick="addLigne()">
</body>
</html>

A toi de jouer.

**cbouchet** · 18/02/2014, 13h14

En bref, pourquoi faire simple quand on peut faire compliqué....

Merci pour votre aide ça marche nickel.

Sauf que lorsque j'ajoutais une ligne, une dernière cellule apparaissait avec un bouton image "supprimer".

Ma fonction :

Code javascript :

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

1
2
3
4
function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById('montableau').deleteRow(i);
}

avec sa déclaration :

Code :

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

var Supprimer = oTR.cells[7].firstchild;

dans la fonction calcul(obj) mais elle n'apparait pas quand j'ajoute une ligne.

Ce bouton serait intéressant au cas où je dois effacer une ligne avant d'imprimer le tout.

**NoSmoking** · 18/02/2014, 20h04

Sauf que lorsque j'ajoutais une ligne, une dernière cellule apparaissait avec un bouton image "supprimer".

tu n'as quand même pas trop dû chercher
dans le code HTML il te suffit de rajouter par exemple

Code html :

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

<td><input type="image" onclick="deleteRow(this)" src="http://club.developpez.com/webdesign/Divers/Boutons-Lightbox/2-lightbox-btn-close.gif"></td>

de rajouter une fonction

Code :

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

1
2
3
4
5
function deleteRow( obj){
  // recherche TR parente de obj
  var oTR = obj.parentNode.parentNode;
  oTR.parentNode.removeChild( oTR);
}

et le tour est joué

En bref, pourquoi faire simple quand on peut faire compliqué....

j'ai quand même l'impression que tu as inversé 2 mots

Complément sur code proposé :
dans la fonction calcul il est préférable d'utiliser children[0] plutôt que firstChild pour être sûr de ne pas récupérer un node #TEXT suivant le navigateur utilisé.

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
function calcul( obj){
  // recherche TR parente de obj
  var oTR = obj.parentNode.parentNode;
  // récup des données
  var constPiece = parseInt(oTR.cells[0].children[0].value);
  var typePiece = oTR.cells[1].children[0].value;
  var tempPiece = parseFloat(oTR.cells[2].children[0].value)||0;
  var longPiece = parseFloat(oTR.cells[3].children[0].value)||0;
  var largPiece = parseFloat(oTR.cells[4].children[0].value)||0;
  var hautPiece = parseFloat(oTR.cells[5].children[0].value)||0;
  var oResult   = oTR.cells[6].children[0];
  // récup du coeff.
  var coeff = typePiece.split(',')[constPiece];
  // prêt pour le calcul
  oResult.innerHTML = longPiece * largPiece * hautPiece *coeff;
}

Application chauffage maison

JavaScript

Discussions similaires

Partager

Partager