problème d'affichage select

par cbouchet Ven 7 Fév 2014 - 16:33

Bonjour,
J'essaie de créer une appli qui me permettra de calculer la puissance nécessaire pour un radiateur en fonction de la pièce et de la construction.
Code html:

Code:: <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">   <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>  <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 js:

Code:: 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="button"; supprimer.value="Supprimer"; 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()); } // Options du SELECT CONSTRUCTION var Construction = new Array(); Construction[0] = new Array("Construction", "Construction"); Construction[1] = new Array("Rénovation", "Rénovation"); function remplirconstr() { var myObj1 = document.getElementById('codeconstr'); for(var i=0; i<Construction.length; i++) { //Création d'un nouvel Option var myOption1 = new Option(Construction[i][0], Construction[i][1]); //Ajout de l'option dans le select myObj1.options[myObj1.length] = myOption1; //<option value="Option1">Valeur1</option> } } window.onload=remplirconstr; // 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"); function remplirpieces() { 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=remplirpieces; // Suppression d'une ligne function deleteRow(r) { var i = r.parentNode.parentNode.rowIndex; document.getElementById('montableau').deleteRow(i); } // Calcul de la puissance function calcul() { var temp1 = (document.forms('monFormulaire').elements["long"].value * document.forms('monFormulaire').elements["large"].value * document.forms('monFormulaire').elements["haut"].value * coefpiece * 0.86 * 100)/100; document.getElementById("RESULT_").value= temp1; } 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; } }

Le select "piece" s'affiche mais pas le "Construction". Je ne vois pas pourquoi.

Deuxième problème : j'aimerais que mon résultat s'affiche dans la cellule résultat mais je ne vois pas comment l'affecter.

Et enfin, j'aimerais que mon bouton "supprimer" soit remplacer par une image contenue dans mon dossier.

Cela fait 3 jours que je sèche dessus.

Merci pour votre aide.

par Scoubifitz Ven 7 Fév 2014 - 17:44

bonjour ,

pour la question 3 (affichage d'une image) :

mettre un input de type image (src = source de l'image) :

remplacez :

Code:: var supprimer = document.createElement("input"); supprimer.type="button"; supprimer.value="Supprimer"; supprimer.name="SupLigne"+lNum.toString(); supprimer.className="supprimer"; supprimer.onclick= function () { deleteRow(this) };

par :

Code:: var supprimer = document.createElement("input"); supprimer.type="image"; supprimer.src="http://2img.net/i/fa/fdf/magic.png"; supprimer.name="SupLigne"+lNum.toString(); supprimer.className="supprimer"; supprimer.onclick= function () { deleteRow(this) ;};

pour la question 1 :

le script ne prend en compte que le dernier window.onload , il faut tout mettre dans la même fonction :

Code:: 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;

ça ne résout pas encore l'affichage dans une ligne supplémentaire , ni le calcul , mais c'est un début ...

je continue de regarder ...

par cbouchet Sam 8 Fév 2014 - 9:17

Merci pour la réactivité. Ca marche nickel.

Je vais pouvoir m'ateler à tenter de récupérer le bon coéfficient en fonction de la construction et de la pièce.