problème d'affichage select

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu problème d'affichage select

Message par cbouchet le 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">
<!--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 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.

cbouchet
Nouveau membre

Messages : 2
Inscrit(e) le : 07/02/2014

cbouchet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème d'affichage select

Message par Scoubifitz le 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://illiweb.com/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 ...

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème d'affichage select

Message par cbouchet le 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.

cbouchet
Nouveau membre

Messages : 2
Inscrit(e) le : 07/02/2014

cbouchet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème d'affichage select

Message par Chacha le Sam 8 Fév 2014 - 10:08

Bonjour et Bienvenue
sur le Forum des Forums Forumactif
Vu que vous êtes nouveau, voici quelques sujets importants :
Sécurité : mail de fondation - Ce qu'il ne faut pas faire
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink
Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 50977
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum