Signaler

Calculatrice pour engrais liquide

Posez votre question asp2p 76Messages postés jeudi 29 avril 2004Date d'inscription 21 mai 2017 Dernière intervention - Dernière réponse le 22 mai 2017 à 08:58 par Help-Jason
Bonjour,
le projet est une calculatrice qui mesure des quantités de produit à mélanger avec de l'eau et à pulvériser sur une surface

une personne m'a fait le code ci-dessous
sauf que cette personne a laisser le code dans une page "fond blanc"
c'est sympa de sa part d'avoir fait le code j'en suis conscient
mais niveau présentation de la page c'est pas tres beau
je lui est demander comment faire mais il n'a pas trop le temps pour refaire le code

autre problème...
quand ont arrive sur la page il faut remplir les infos et cliquer sur valider pour afficher le résultat
en fait il fait charge des fonctions pour les affiches ( "résultat" )
j'aurais quand même préférer que le résultat s'affiche dans mon formulaire et non comme lui l'a fait dans sont code

ci-dessous "sont code" que je voudrais insérer dans "le mien" pour avoir le coté esthétique ( table, fond gris, etc. )

Sont Code...
<!DOCTYPE [/contents/498-html-langage html]>
<html>
<head>
<style type="text/css">
 h3 {color:red}
 h4 {color:blue}
</style>
<script>
var produits = [
{'produit':'Délectose','quantite':5,'surface':10},
{'produit':'Briamide','quantite':3.5,'surface':5},
{'produit':'Cortofade','quantite':4,'surface':17}
];

var quantite = 0;
var surface = 0;

function creeListe() {
var html = "";
 html = option ="<option value='x'>Sélectionner un produit</option>";
for(var i=0;i<produits.length;i++) {
var option ="<option value='"+i+"'>"+produits[i].produit+"</option>";
 html=html+option;
}
document.getElementById('produit').innerHTML = html;
}

function init(value) {
 quantite = 0;
 surface = 0; 
var xcp = document.getElementById('cp').value; 
var xst = document.getElementById('st').value; 
document.getElementById('info').innerHTML = "<br/>";
if (value!="x") {
 quantite = produits[value].quantite;
 surface = produits[value].surface; 
document.getElementById('info').innerHTML = "Dosage = "+quantite+" ml par litre et 1 litre pour "+surface+" m2";
}
document.getElementById('resultat').innerHTML = '';
if (xcp != 0 && xst != 0) {
 calcul();
}
}

function calcul() {
var idProduit = document.getElementById('produit').value;
if ( idProduit== "x" ) {
alert("Sélectionner un produit !!!");
return;
}
if (isNaN(document.getElementById('cp').value)) {
alert("Contenance incorrecte !!!");
return; 
}
if (document.getElementById('cp').value <= 0) {
alert("Contenance incorrecte !!!");
return; 
} 
if (isNaN(document.getElementById('st').value)) {
alert("Surface terrain incorrecte !!!");
return; 
} 
if (document.getElementById('st').value <= 0) {
alert("Surface terrain incorrecte !!!");
return; 
} 
var xcp = document.getElementById('cp').value; 
var xst = document.getElementById('st').value; 
var a = document.getElementById('resultat'); 
 a.innerHTML = "<hr/>";
// dosage produit pour un m2
var dosage1M2 = quantite / surface;

// dosage produit total 
var dose = dosage1M2 * xst;
var x = parseInt(dose*100)/100;
//a.innerHTML = a.innerHTML + 'Dose totale de '+produits[idProduit].produit+" = "+x+" ml<br/>";
// nombre de litres total
var litres = xst / surface;
var y = parseInt(litres*100)/100;
//a.innerHTML = a.innerHTML + "Quantité totale d'eau = "+y+" L<br/>";

// nombre de pulvérisateurs 
//a.innerHTML = a.innerHTML + 'Prévoir :<br/>';
var pulve = y/xcp;

// Nombre de pulvérisateurs complets
var pulComp = parseInt(pulve);
if (pulComp != 0) {
var zC = quantite * xcp;
 libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
//a.innerHTML = a.innerHTML + "* "+pulComp+" "+libelle+" de chacun "+xcp+" L et "+zC+" ml de "+produits[idProduit].produit+"<br/>";
}
// Pulvérisateur partiel
var pulPart = pulve - pulComp;
if (pulPart != 0) {
var w = pulPart * xcp * 100;
 w = Math.round(w,2) / 100; 
var z = w * quantite * 100;
 z = Math.round(z,2) / 100; 
//a.innerHTML = a.innerHTML + "* 1 pulvérisateur de "+w+" L et "+z+" ml de "+produits[idProduit].produit+"<br/>";
}
//------- Mélange à faire comme ceci
 a.innerHTML = a.innerHTML + "<hr/>";
 a.innerHTML = a.innerHTML + "<h3 color='red'>Mélange à faire comme ceci :</h3>"; 

if (pulComp != 0) {
 libelle = pulComp == 1 ? "Dans le pulvérisateur rempli complètement/" : "Dans chacun des "+pulComp+" pulvérisateurs remplis complètement:";
 a.innerHTML = a.innerHTML + "<h4>"+libelle+"</h4>"; 
 a.innerHTML = a.innerHTML + "Litre(s) d'eau à mettre :<br/>";
 a.innerHTML = a.innerHTML + "<input type='text' disabled value='"+xcp+" L'/><br/>";
 a.innerHTML = a.innerHTML + "Millilitre(s) de "+produits[idProduit].produit+" à mettre :<br/>";
 a.innerHTML = a.innerHTML + "<input type='text' disabled value='"+zC+" ml'/><br/>"; 
 a.innerHTML = a.innerHTML + "Surface couverte en m2 :<br/>";
 xSurface = surface * xcp;
 a.innerHTML = a.innerHTML + "<input type='text' disabled value='"+xSurface+" m2'/><br/>"; 
}
if (pulPart != 0) {
 a.innerHTML = a.innerHTML + "<h4>Dans le pulvérisateur rempli partiellement:</h4>"; 
 a.innerHTML = a.innerHTML + "Litre(s) d'eau à mettre :<br/>";
 a.innerHTML = a.innerHTML + "<input type='text' disabled value='"+w+" L'/><br/>";
 a.innerHTML = a.innerHTML + "Millilitre(s) de "+produits[idProduit].produit+" à mettre :<br/>";
 a.innerHTML = a.innerHTML + "<input type='text' disabled value='"+z+" ml'/><br/>"; 
 a.innerHTML = a.innerHTML + "Surface couverte en m2 :<br/>";
 xSurface = surface * w;
 a.innerHTML = a.innerHTML + "<input type='text' disabled value='"+xSurface+" m2'/><br/>";
}

//------- Quantité pour couvrir le terrain
 a.innerHTML = a.innerHTML + "<hr/>";
 a.innerHTML = a.innerHTML + "<h3 color='red'>Quantité pour couvrir votre terrain :</h3>";
// Eau
 a.innerHTML = a.innerHTML + "Quantité d'eau en litres :<br/>";
 a.innerHTML = a.innerHTML + "<input type='text' disabled value='"+y+" L'/><br/>";
// Produit
 a.innerHTML = a.innerHTML + "Quantité de produit en millilitres :<br/>";
 a.innerHTML = a.innerHTML + "<input type='text' disabled value='"+x+" ml'/><br/>"; 
// Nombre de pulvérisateurs
 a.innerHTML = a.innerHTML + "Nombre de pulvérisateurs :<br/>"; 
if (pulComp != 0) {
 libelle = pulComp == 1 ? "pulvérisateur" : "pulvérisateurs";
 a.innerHTML = a.innerHTML + "- "+pulComp+" "+libelle+" de "+xcp+" L<br/>";
} 
// Pulvérisateur partiel
var pulPart = pulve - pulComp;
if (pulPart != 0) {
var w = pulPart * xcp * 100;
 w = Math.round(w,2) / 100; 
var z = w * quantite * 100;
 z = Math.round(z,2) / 100; 
 a.innerHTML = a.innerHTML + "- 1 pulvérisateur de "+w+" L <br/>";
} 
}
</script>
</head>

<body onload="creeListe()" style="font-family:verdana">
<h2>Calcul</h2>
<select id="produit" onchange="init(this.value)">
</select>
<div id="info">
<br/>
</div> 
<br/><br/><br/>
<table>
<tr>
<td>Contenance pulvérisateur (L)</td>
<td>:</td>
<td><input type="text" id="cp" value="0" /><br/></td>
</tr>
<tr>
<td>Surface Terrain (m2)</td>
<td>:</td>
<td><input type="text" id="st" value="0" /><br/></td>
</tr> 
</table>
<input type="button" value="Valider" onclick="calcul();"/>
<div id="resultat">

</div>
</body>
</html>

Image de présentation ( si j'essai depuis le menu du post l'image s'affiche pas )
voici le liens: http://zupimages.net/viewer.php?id=17%2F20%2F7f0z.jpg

Mon Code...
je sais que le miens est que du html basic d'où le pourquoi je voudrais mettre sont code dans le miens
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body background="http://bookgazon.hebergratuit.net/herbe.jpg">
<table width="50%" border="1" align="center">
 <tr bgcolor="#CCCCCC"> 
 <td> 
 <p><b><font size="6">Calculatrice<br>
 <font size="3">pour bien calculer le dosage d'un produit<br>
 <font color="#808080">...........................................................................................................................................................................................................................................</font></font></font></b></p>
 <p><b><font color="#FF3333"><u>Informations.</u></font></b></p>
 <p><b><br>
 Produits:</b> <font color="#FF3333"><b>*</b></font><br>
 <font size="2">Veuillez choisir le produit que vous souhaitez utilisez 
 </font></p>
 <form name="form1" >
 <select name="select" size="1">
 <option>Produit 1</option>
 <option>Produit 2</option>
 <option>Produit 3</option>
 <option>Produit 4</option>
 </select>
 </form>
 <p><br>
 <b>Pulverisateur: <font color="#FF3333">*</font></b><br>
 <font size="2">Indiquez la quantité de votre pulverisateur en litre </font> 
 </p>
 <form name="form2" >
 <input type="text" name="textfield">
 </form>
 <br>
 <b>Superficie du terrain</b> <font color="#FF3333"><b>*</b></font><br>
 <font size="2">indiquer la superficie de votre terrain en m2<br>
 </font> 
 <form name="form3" >
 <input type="text" name="textfield2">
 </form>
 <br>
 <form name="form4" >
 <input type="submit" name="Submit" value="Valider">
 </form>
 <p><b><font color="#FF3333"><u> </u></font></b></p>
 <p><b><font color="#FF3333"><u>Vous devez mettre dans votre pulverisateur:</u></font></b></p>
 <b>Quantité d'eau en "L" à mettre dans votre pulverisateur:</b><br>
 <form name="form5" >
 <input type="text" name="textfield3">
 </form>
 <br>
 <b>Quantité de produit en "ml" à mettre dans le pulverisateur:</b><br>
 <form name="form5" >
 <input type="text" name="textfield4">
 </form>
 <br>
 <b>Surface à couvrir en m2... pour un pulverisateur:</b><br>
 <form name="form5" >
 <input type="text" name="textfield5">
 </form>
 <p><b><font color="#FF3333"><u><br>
 </u></font></b></p>
 <p><b><font color="#FF3333"><u>Quantité total pour faire tout votre terrain:</u></font></b><br>
 </p>
 <p> <b>Quantité d'eau</b></p>
 <form name="form5" >
 <input type="text" name="textfield3">
 </form>
 <br>
 <b>Quantité de produit</b><br>
 <form name="form5" >
 <input type="text" name="textfield4">
 </form>
 <br>
 <b>Nombre de pulverisateur</b><br>
 <form name="form5" >
 <input type="text" name="textfield5">
 </form>
 <br>
 <br>
 <b>Descriptif du produit</b><br>
 <form name="form6" >
 <input type="text" name="textfield6">
 </form>
 <br>
 </td>
 </tr>
</table>
</body>
</html>

Image de présentation ( si j'essai depuis le menu du post l'image s'affiche pas )
voici le liens: http://zupimages.net/viewer.php?id=17%2F20%2Fdigc.jpg

si quelqu'un a la solution se serait vraiment bien car je connais pas le JavaScript et c'est vraiment dur pour moi de trouver une solution

Afficher la suite 
Utile
+0
plus moins
Re
en fait sur la calculette...
il faut cliquer sur valider pour afficher le résultat... ( le code fait appel/charge toutes les "fonctions" après avoir avoir cliquer sur le bouton valider )
hors que moi dans ma page
c'était pas comme ça et je ne trouve pas comment faire pour mettre sont formulaire comme ci-dessous
Donnez votre avis
Utile
+0
plus moins
Salut,

La version JSFiddle : https://jsfiddle.net/wreLeos4/1/
Attention, pour une raison qui m'échappe, le code de JSFiddle est légèrement différent car il plante dans le cas contraire. Merci d'utiliser ce code dans ta page HTML :

var produits = {
 "Délectose":{"quantite":5,"surface":10},
 "Briamide":{"quantite":3.5,"surface":5},
 "Cortofade":{"quantite":4,"surface":17}
};

var quantite = 0;
var surface = 0;
function eventListeners(){    document.getElementById("submitButton").addEventListener("click",calcul,false);
}
  

function calcul() {
 var idProduit = document.getElementById('produit').value;
 surface = produits[idProduit].surface;
 quantite = produits[idProduit].quantite;
 if ( idProduit== "x" ) {
  alert("Sélectionner un produit !!!");
  return;
 }
 if (isNaN(document.getElementById('cp').value)) {
  alert("Contenance incorrecte !!!");
  return; 
 }
 if (document.getElementById('cp').value <= 0) {
  alert("Contenance incorrecte !!!");
  return; 
 } 
 if (isNaN(document.getElementById('st').value)) {
  alert("Surface terrain incorrecte !!!");
  return; 
 } 
 if (document.getElementById('st').value <= 0) {
  alert("Surface terrain incorrecte !!!");
  return; 
 } 
 var xcp = document.getElementById('cp').value; 
 var xst = document.getElementById('st').value; 
 // dosage produit pour un m2
 var dosage1M2 = quantite / surface;
 // dosage produit total 
 var dose = dosage1M2 * xst;
 var x = parseInt(dose*100)/100;
 // nombre de litres total
 var litres = xst / surface;
 var y = parseInt(litres*100)/100;
 // nombre de pulvérisateurs 
 var pulve = y/xcp;
 // Nombre de pulvérisateurs complets
 var pulComp = parseInt(pulve);
 if (pulComp != 0) {
  var zC = quantite * xcp;
 }
 // Pulvérisateur partiel
 var pulPart = pulve - pulComp;
 if (pulPart != 0) {
  var w = pulPart * xcp * 100;
  w = Math.round(w,2) / 100; 
  var z = w * quantite * 100;
  z = Math.round(z,2) / 100; 
 }
 // EAU DANS UN PULVERISATEUR : xcp litres
 // PRODUIT DANS UN PULVERISATEUR : produits[idProduit].quantite ml
 // SURFACE COUVERTE : surface * xcp m2
 // QUANTITE EAU TOTALE : y
 // QUANTITE PRODUIT TOTALE : x
        // NOMBRE PULVERISATEUR : pulComp
 document.getElementById("quantite_eau").value = xcp;
 document.getElementById("quantite_produit").value = produits[idProduit].quantite;
        document.getElementById("surface").value = surface * xcp;
 document.getElementById("eau_total").value = y;
 document.getElementById("produit_total").value = x;
 document.getElementById("nb_pulverisateur").value = pulComp;
}

<body background="http://bookgazon.hebergratuit.net/herbe.jpg" onload="eventListeners();">
  
<table align="center" border="1" width="50%">
 <tbody><tr bgcolor="#CCCCCC"> 
 <td> 
 <p><b><font size="6">Calculatrice<br>
 <font size="3">pour bien calculer le dosage d'un produit<br>
 <font color="#808080">...........................................................................................................................................................................................................................................</font></font></font></b></p>
 <p><b><font color="#FF3333"><u>Informations.</u></font></b></p>
 <p><b><br>
 Produits:</b> <font color="#FF3333"><b>*</b></font><br>
 <font size="2">Veuillez choisir le produit que vous souhaitez utilisez 
 </font></p>
 <form name="form1">
 <select id="produit" name="select" size="1">
 <option>Délectose</option>
 <option>Briamide</option>
 <option>Cortofade</option>
 </select>
 </form>
 <p><br>
 <b>Pulverisateur: <font color="#FF3333">*</font></b><br>
 <font size="2">Indiquez la quantité de votre pulverisateur en litre </font> 
 </p>
 <form name="form2">
 <input name="textfield" id="cp" type="text">
 </form>
 <br>
 <b>Superficie du terrain</b> <font color="#FF3333"><b>*</b></font><br>
 <font size="2">indiquer la superficie de votre terrain en m2<br>
 </font> 
 <form name="form3">
 <input name="textfield2" id="st" type="text">
 </form>
 <br>
 <form name="form4">
 <input name="Submit" value="Valider" id="submitButton" type="button">
 </form>
 <p><b><font color="#FF3333"><u> </u></font></b></p>
 <p><b><font color="#FF3333"><u>Vous devez mettre dans votre pulverisateur:</u></font></b></p>
 <b>Quantité d'eau en "L" à mettre dans votre pulverisateur:</b><br>
 <form name="form5">
 <input name="textfield3" id="quantite_eau" type="text">
 </form>
 <br>
 <b>Quantité de produit en "ml" à mettre dans le pulverisateur:</b><br>
 <form name="form5">
 <input name="textfield4" id="quantite_produit" type="text">
 </form>
 <br>
 <b>Surface à couvrir en m2... pour un pulverisateur:</b><br>
 <form name="form5">
 <input name="textfield5" id="surface" type="text">
 </form>
 <p><b><font color="#FF3333"><u><br>
 </u></font></b></p>
 <p><b><font color="#FF3333"><u>Quantité total pour faire tout votre terrain:</u></font></b><br>
 </p>
 <p> <b>Quantité d'eau</b></p>
 <form name="form5">
 <input name="textfield3" id="eau_total" type="text">
 </form>
 <br>
 <b>Quantité de produit</b><br>
 <form name="form5">
 <input name="textfield4" id="produit_total" type="text">
 </form>
 <br>
 <b>Nombre de pulverisateur</b><br>
 <form name="form5">
 <input name="textfield5" id="nb_pulverisateur" type="text">
 </form>
 <br>
 <br>
 <b>Descriptif du produit</b><br>
 <form name="form6">
 <input name="textfield6" type="text">
 </form>
 <br>
 </td>
 </tr>
</tbody></table>
</body></html>


asp2p 76Messages postés jeudi 29 avril 2004Date d'inscription 21 mai 2017 Dernière intervention - 20 mai 2017 à 20:25
depuis se matin quand j'essai de comprendre mais j'arrive pas a comprendre comment faire les calculs et a force de chercher je m'embrouille tout seul
chuis vraiment désolé je crois que je vais pas avoir le choix que d'abandonné se projet c'est trop complexe et a force j'ai la migraine qui revient
Répondre
asp2p 76Messages postés jeudi 29 avril 2004Date d'inscription 21 mai 2017 Dernière intervention - 21 mai 2017 à 00:26
je vient de faire l'essai directement depuis mon hébergeur

( Quantité de produit en "ml" à mettre dans le pulvérisateur: )
sa ne bouge pas sa indique toujours 5

http://bookgazon.hebergratuit.net/new3.php

pareil ont se retrouve toujours avec les erreurs rencontrer avant

Produit: délectose
Pulvérisateur:: 100
Superficie du terrain : 10

il m'affiche dans le résultat...

Quantité d'eau en "L": 100
Quantité de produit en "ml": 5
Surface à couvrir en m2: 1000

hors que normalement c'est la parti pulvérisateur partiel qui s'affiche

Quantité d'eau en "L": 1
Quantité de produit en "ml": 5
Surface à couvrir en m2: 10

c'est pour sa que le code mis en première page été bien car il éviter justement se genre d'erreur
mais le souci c'est que je sais pas pourquoi il a fait en sorte d'afficher les champs de résultat qu'après avoir valider
hors que toi par contre comment ta programmer c'est bien car ont clique sur valider et le résultat s'affiche dans les champs qui été déjà visible depuis le début
Répondre
Help-Jason 1202Messages postés mardi 28 juin 2011Date d'inscription 22 mai 2017 Dernière intervention - 21 mai 2017 à 10:03
L'ancienne approche est plus lente que la nouvelle. Créer des éléments HTML via JavaScript en utilisant .innerHTML est plus lent que d'utiliser document.createElement() qui est lui-même plus lent que de créer directement les éléments HTML dans la page.
Ma solution est la dernière : les champs sont apparents, pas besoin de les créer dynamiquement en JavaScript et ça allège le code JavaScript.

Franchement j'arrive pas à concevoir que tu ne comprennes pas le code que je t'ai mis. On va y aller ligne par ligne !
Première ligne :
 var xcp = document.getElementById('cp').value;  // xcp = valeur dans le champ quantité pulvérisateur en L

As-tu des questions ?
Répondre
asp2p 76Messages postés jeudi 29 avril 2004Date d'inscription 21 mai 2017 Dernière intervention - 21 mai 2017 à 18:44
je n'est aucune notion de javascript
mais j'essai quand meme de faire l'effort

var
( definie une variable )

xcp
( nom de la variable )

=
( égal )

document.getElementById
( je sais pas a quoi sa sert j'ai chercher sur internet mais comme bien souvent les explications sont faite avec des mots compliquer a comprendre )

.value
( je vois que sa veut dire valeur )

donc en gros la variable xcp et égal a la valeur cp
c'est bien beau mais sa sert a quoi de faire ça ?

perso je crois que sa va etre très difficile a comprendre tout ça
Répondre
Help-Jason 1202Messages postés mardi 28 juin 2011Date d'inscription 22 mai 2017 Dernière intervention - 22 mai 2017 à 08:58
Très bien ! La variable xcp récolte la valeur cp. Comme la fonction "calcul()" est lancée quand l'utilisateur clique sur Valider, il est supposé que, dans cp, une valeur a été rentrée.

Pour info, document.getElementById te permet de chercher un élément HTML dans ta page dont l'id est passé en paramètre. L'attribut .value te permet de récolter la valeur d'un input ici ce que l'utilisateur a rentré.

Après avoir cliqué sur Valider, pour effectuer des calculs et par simplicité du code, on a décidé d'appeler la valeur rentrée dans cp (document.getElementById("cp").value) xcp. Tu remarquera que c'est plus simple d'utiliser xcp.

Bien, deuxième ligne :
surface = produits[idProduit].surface;


Des questions ?
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !