Bonjour,
Débutante en javascript, je n'arrive pas à calculer mon total global (id="total_achat"), pouvez-vous me donner un coup de pouce ?
JS:
function calcul_prix_terroir(){
var dernierPrixterroir = 0;
for(i=1;i<10;i++){
nombreterroir=document.getElementById("nombreterroir"+i).value;
prixterroir=document.getElementById("prixterroir"+i).value;
prixTotalterroir=nombreterroir * (Math.round(prixterroir*100))/100;
dernierPrixterroir = dernierPrixterroir + prixTotalterroir;
document.getElementById("prix_totalterroir"+i).value=prixTotalterroir;
document.getElementById("finterroir").value=dernierPrixterroir;
}
}
function calcul_prix_volaille(){
var dernierPrixvolaille = 0;
for(i=1;i<10;i++){
nombrevolaille=document.getElementById("nombrevolaille"+i).value;
prixvolaille=document.getElementById("prixvolaille"+i).value;
prixTotalvolaille=nombrevolaille * (Math.round(prixvolaille*100))/100;
dernierPrixvolaille = dernierPrixvolaille + prixTotalvolaille;
document.getElementById("prix_totalvolaille"+i).value=prixTotalvolaille;
document.getElementById("finvolaille").value=dernierPrixvolaille;
}
}
function calcul_prix_poisson(){
var dernierPrixpoisson = 0;
for(i=1;i<10;i++){
nombrepoisson=document.getElementById("nombrepoisson"+i).value;
prixpoisson=document.getElementById("prixpoisson"+i).value;
prixTotalpoisson=nombrepoisson * (Math.round(prixpoisson*100))/100;
dernierPrixpoisson = dernierPrixpoisson + prixTotalpoisson;
document.getElementById("prix_totalpoisson"+i).value=prixTotalpoisson;
document.getElementById("finpoisson").value=dernierPrixpoisson;
}
}
function calcul_total(){
alert ("Merci")
total = dernierPrixterroir + dernierPrixvolaille + dernierPrixpoisson;
document.getElementById("total_achat").value = total;
document.getElementById("port").value = total + 10.5;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional" "
http://www.w3.org/TR/html4/loose.dtd ">
<HTML>
<HEAD>
<title>Formulaire Commande Village du Larzac</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="village.js" type="text/javascript"></script>
</HEAD>
<form name="bdc_marmus" >
<!-- tab1 -->
----
<table class="produits" border="0" cellpadding="0" cellspacing="0" align="right">
----, </td>
----
,
<!-- tab rose -->
----
<table class="produits" border="0" cellpadding="0" cellspacing="0" align="right">
----
,
<table class=\"bandeau\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" width=\"100%\">
----
Recettes Bio Terroir,
Verrine 160g par conditionnement de 12,
</td>
</tr>
<tr>
<td>
----
Réf. |
Recettes |
PU |
Quantité |
Total |
----
6000,
[espace_detaillant.html Retour à votre espace ]
</td>
</tr>
</table>
</form>
</html>
CSS :
/* -- Formulaire Bon de Commande MARMUS */
body {
background: #fff;
color: #000;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 62.8%;
height: 100%;
margin: 0;
width: auto;
}
div#entete {
width: 320px;
margin-top: 0px;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size: 1.0em;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
div#header1 {
float: right;
padding-top: 10px;
}
div#header1 a {
color: #000;
text-decoration: underline;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size: 1.2em;
font-weight: bold;
}
div#header2 {
float: right;
margin-right: 150px;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size: 1.6em;
padding-top: 10px;
}
table.produits {
width: 768px;
text-align: center;
border: 1px solid #e1e1e1;
margin-right: 7px;
}
table.produits_inside {
width: 748px;
margin: 5px auto;
}
table.pave_tot {
width: 260px;
text-align: right;
border: thin solid #e1e1e1;
margin: 10px 15px 0 0;
}
table.pave_tot_inside {
width: 240px;
margin: 5px auto;
text-align: right;
}
table.produits tr.interl {
line-height: 20px;
}
table.produits tr.titres th {
font-weight: bold;
font-size: 14px;
line-height: 20px;
}
table.produits tr td {
font-size: 13px;
}
table.bandeau {
margin: 3px;
}
tr.fond_bleu {
background-color: #82bfc2;
}
tr.fond_vert {
background-color: #cc8a57;
}
table.produits_inside tr td{
line-height: 24px;
}
table.produits_inside tr th, table.produits_inside tr td{
line-height: 24px;
border: 1px dotted #e1e1e1;
}
table.produits_inside tr.titres th {
border-top: none;
}
table.produits_inside tr th.lib_tot, table.produits_inside tr td.valeur, table.produits_inside tr td.val_tot {
border-right: none;
}
table.produits_inside tr th.lib_ref, table.produits_inside tr td.ref {
border-left: none;
}
table.produits_inside tr.s-tot_grpe td {
border-bottom: none;
}
table.produits td.titre_tradition1 {
font-size: 14px;
font-weight: bold;
padding-left: 5px;
line-height: 27px;
width: 60%;
text-align: left;
vertical-align: middle;
}
img.picto {
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
}
table.produits td.titre_tradition2 {
font-size: 11px;
font-weight: bold;
padding-right: 5px;
line-height: 20px;
width: 38%;
}
td.ref {
width: 8%;
}
td.nom_recette {
text-align: left;
padding-left: 10px;
text-decoration: underline;
width: 60%;
}
td.nom_recette a {
color: #000;
}
td.prix {
color: #ff6c12;
font-weight: bold;
width: 10%;
}
td.prix input {
color: #ff6c12;
font-weight: bold;
text-align: right;
border: none;
}
td.qte {
width: 10%;
}
input {
border: 1px solid #000;
}
td.qte input {
height: 13px;
width: 30px;
vertical-align: middle;
text-align: center;
}
td.valeur, td.val_tot {
width: 12%;
}
td.valeur input, td.val_tot input {
border: none;
text-align: right;
width: 75px;
}
td.val_tot input {
font-weight: bold;
}
td.lib_s-tot {
text-align: left;
padding-left: 10px;
text-decoration: normal;
font-weight: bold;
}
/* --- PAVE TOTAL COMMANDE */
table.pave_tot {
width: 260px;
text-align: right;
border: 1px solid #e1e1e1;
margin-top: 20px;
margin-right: 7px;
}
table.btn {
border: none;
}
table.identif {
width: 768px;
}
table.pave_tot_inside {
width: 240px;
margin: 5px auto;
text-align: right;
}
table.identif2 {
width: 748px;
}
table.pave_tot tr td {
font-weight: bold;
font-size: 14px;
line-height: 20px;
}
table.pave_tot_inside tr td{
line-height: 24px;
border: 1px dotted #e1e1e1;
}
table.pave_tot_inside tr.ligne1 td {
border-top: none;
}
table.pave_tot_inside tr td.val_cde {
border-right: none;
width: 89px;
text-align: center;
}
table.pave_tot_inside tr td.lib {
border-left: none;
padding-right: 15px;
}
table.pave_tot_inside tr.ligne_der td {
border-bottom: none;
}
table.pave_tot_inside tr td.val_cde input {
border: none;
text-align: right;
font-weight: bold;
width: 75px;
}
/* -- boutons Envoyer - Imprimer -- */
input#imprim, input#envoi, input#calcul {
width: 88px;
height: 22px;
border: none;
}
input#imprim {
background-image: url(../images/btn_print.jpg);
}
input#envoi {
background-image: url(../images/btn_mail.jpg);
}
input#calcul {
background-image: url(../images/btn_calcul.jpg);
margin-right: 15px;
}
/* --- PAVE Identification */
table.identif {
width: 768px;
text-align: left;
border: 1px solid #e1e1e1;
margin-top: 5px;
margin-right: 7px;
}
table.identif_inside {
width: 748px;
margin: 5px auto;
text-align: left;
}
table.identif tr td {
font-weight: bold;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size: 13px;
line-height: 20px;
}
table.identif_inside tr td{
line-height: 24px;
}
table.identif_inside tr td input {
width: 100%;
font-size: 12px;
height: 13px;
font-weight: normal;
border: none;
border-bottom: 1px dotted #e1e1e1;
}
.droite {
text-align: right;
}
tr.fond_rose {
background-color: #cc5457;
}
#retour_espace {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding-top: 10px;
text-align: center;
}
#retour_espace a {
font-size: 14px;
font-weight: bold;
color: #458C8F;
text-decoration: underline;
background-position: center;
padding-top: 20px;
}
Afficher la suite