problème d'affichage select

3 participants

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

Résolu problème d'affichage select

Message 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">
<!--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.
avatar

cbouchet
Nouveau membre

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

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

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

Message 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 ...
Scoubifitz

Scoubifitz
Membre actif

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

Voir le profil de l'utilisateur 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 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.
avatar

cbouchet
Nouveau membre

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

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

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

Message par Chacha 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 :
problème d'affichage select Attention2 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
problème d'affichage select Check10Bonjour,

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 problème d'affichage select Envoi10


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton problème d'affichage select 50378

A bientôt sur ForumActif Smile
Chacha

Chacha
Modéractif
Modéractif

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

Voir le profil de l'utilisateur https://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

- Sujets similaires

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