Afficher 3 zones calculées [Résolu]

[francky76]

Bonjour àToutes et tous,

Désolé du dérangement, mais j'aimerai votre aide pour ce script
Pour faire des calculs sur ma page, j'ai inséré les lignes suivantes :

Code :

1
2
3
4
5
6
7
8
9
10
<input name="field_4" type="text" id="tb_saisie_1_2" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />
<input name="field_5" type="text" id="tb_saisie_1_3" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />
<input name="field_6" type="text" id="tb_saisie_1_4" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />
<input name="field_7" type="text" id="tb_saisie_3_7" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />
<input name="field_8" type="text" id="tb_saisie_2_5" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />
<input name="field_9" type="text" id="tb_saisie_6_16" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />
<input name="field_10" type="text" id="tb_saisie_5_8" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />
<input name="field_11" type="text" id="tb_saisie_5_9" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />
<input name="field_12" type="text" id="tb_saisie_5_10" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />
<input name="field_13" type="text" id="tb_saisie_5_13" class="tbsaisie" onkeyup="javascript:CalCulTotal();" autocomplete="off" style="border:1px solid #FF00FF; text-align:right;" size="10" />

Ensuite, j'ai ceci ( fonction javascript )

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
  function CalCulTotal() {
    var total = 0;
    total += Number(document.getElementById('tb_saisie_1_2').value.replace(',', '.')) * 0.50 * 1;
    total += Number(document.getElementById('tb_saisie_1_3').value.replace(',', '.')) * 1.00 * 1;
    total += Number(document.getElementById('tb_saisie_1_4').value.replace(',', '.')) * 1.80 * 1;
    total += Number(document.getElementById('tb_saisie_3_7').value.replace(',', '.')) * 6.50 * 1;
    total += Number(document.getElementById('tb_saisie_2_5').value.replace(',', '.')) * 3.15 * 1;
    total += Number(document.getElementById('tb_saisie_6_16').value.replace(',', '.')) * 2.04 * 1;
    total += Number(document.getElementById('tb_saisie_5_8').value.replace(',', '.')) * 6.50 * 1;
    total += Number(document.getElementById('tb_saisie_5_9').value.replace(',', '.')) * 4.50 * 1;
    total += Number(document.getElementById('tb_saisie_5_10').value.replace(',', '.')) * 8.00 * 1;
    total += Number(document.getElementById('tb_saisie_5_13').value.replace(',', '.')) * 7.50 * 1;
    total;
    document.getElementById('lbTotalBrut').innerHTML = total.toFixed(2) + ' € ';
    if (total > 0) {
      document.getElementById('tTableCumul').style.display = ''
    } else {
      document.getElementById('tTableCumul').style.display = 'none'
    };
  }
</script>

Il existe dans ma page <table id="tTableCumul"> et <span id="lbTotalBrut">, pour afficher sur le site les calculs cumulés.

Tout fonctionne parfaitement et la valeur des zones se cumulent et donne bien la somme totale ( grace à <span id="lbTotalBrut">

J'aimerai maintenant afficher en dessous des 300 € ( exemple ) , 2 autres informations, avec d'une part + 40% et de l'autre + 50%.
Ce qui donnerai :

300 €
420 € ( qui correspond à 300 €, majoré de 40% )
450 € ( qui correspond à 300 €, majoré de 50% )

J'ai tout essayé et rien à faire, je ne sais pas comment faire.

Merci de votre aide

[ticroch]

Et si tu fais ca :

Code :

1
2
3
4
5
6
7
8
9
10
 
....
 
total = ...  // 300 dans ton exemple
var total_40 = total * 1,4; / majoré de 40%
var total_50 = total * 1,5; / majoré de 50%
 
document.getElementById('lbTotalBrut').innerHTML = total + ' € ' + '<br/>' + total_40 + ' € ' + '<br/>' + total_50 + ' € ';
 
....

ca va t'écrire sur 3 lignes:
300 €
420 €
450 €

[francky76]

Merci beaucoup pour la réponse.
J'ai bien les 3 lignes qui s'affichent, mais la deuxième valeur et la troisième
indique 0. Soit ( pour l'exemple des 300 )

300 €
0.00 €
0.00 €

Ci-dessous le code que j'ai inséré ( merci encore pour l'aide )
Amicalement

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
 
<script type="text/javascript">
  function CalCulTotal() {
    var total = 0;
    var total_40 = total * 1.4;
	var total_50 = total * 1.5;
    total += Number(document.getElementById('tb_saisie_1_2').value.replace(',', '.')) * 0.50 * 1;
    total += Number(document.getElementById('tb_saisie_1_3').value.replace(',', '.')) * 1.00 * 1;
    total += Number(document.getElementById('tb_saisie_1_4').value.replace(',', '.')) * 1.80 * 1;
    total += Number(document.getElementById('tb_saisie_3_7').value.replace(',', '.')) * 6.50 * 1;
    total += Number(document.getElementById('tb_saisie_2_5').value.replace(',', '.')) * 3.15 * 1;
    total += Number(document.getElementById('tb_saisie_6_16').value.replace(',', '.')) * 2.04 * 1;
    total += Number(document.getElementById('tb_saisie_5_8').value.replace(',', '.')) * 6.50 * 1;
    total += Number(document.getElementById('tb_saisie_5_9').value.replace(',', '.')) * 4.50 * 1;
    total += Number(document.getElementById('tb_saisie_5_10').value.replace(',', '.')) * 8.00 * 1;
    total += Number(document.getElementById('tb_saisie_5_13').value.replace(',', '.')) * 7.50 * 1;
    total;
 
document.getElementById('lbTotalBrut').innerHTML = total.toFixed(2) + ' € ' + '<br/>' + total_40.toFixed(2) + ' € ' + '<br/>' + total_50.toFixed(2) + ' € ';
 
    if (total > 0) {
      document.getElementById('tTableCumul').style.display = ''
    } else {
      document.getElementById('tTableCumul').style.display = 'none'
    };
  }
</script>

[ticroch]

Oui ba il faut que tu fasse le pourcentage après avoir calculé le total, ca c#est pas de l'informatique mais des math

C#est clair que 40% de 0 sera 0€ ^^

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<script type="text/javascript">
  function CalCulTotal() {
    var total = 0;
    total += Number(document.getElementById('tb_saisie_1_2').value.replace(',', '.')) * 0.50 * 1;
    total += Number(document.getElementById('tb_saisie_1_3').value.replace(',', '.')) * 1.00 * 1;
    total += Number(document.getElementById('tb_saisie_1_4').value.replace(',', '.')) * 1.80 * 1;
    total += Number(document.getElementById('tb_saisie_3_7').value.replace(',', '.')) * 6.50 * 1;
    total += Number(document.getElementById('tb_saisie_2_5').value.replace(',', '.')) * 3.15 * 1;
    total += Number(document.getElementById('tb_saisie_6_16').value.replace(',', '.')) * 2.04 * 1;
    total += Number(document.getElementById('tb_saisie_5_8').value.replace(',', '.')) * 6.50 * 1;
    total += Number(document.getElementById('tb_saisie_5_9').value.replace(',', '.')) * 4.50 * 1;
    total += Number(document.getElementById('tb_saisie_5_10').value.replace(',', '.')) * 8.00 * 1;
    total += Number(document.getElementById('tb_saisie_5_13').value.replace(',', '.')) * 7.50 * 1;
    var total_40 = total * 1.4;
    var total_50 = total * 1.5; 
document.getElementById('lbTotalBrut').innerHTML = total.toFixed(2) + ' € ' + '<br/>' + total_40.toFixed(2) + ' € ' + '<br/>' + total_50.toFixed(2) + ' € ';
 
    if (total > 0) {
      document.getElementById('tTableCumul').style.display = ''
    } else {
      document.getElementById('tTableCumul').style.display = 'none'
    };
  }
</script>

[francky76]

Lol. :-) Désolé, je n'avais pas fais attention.
Merci beaucoup, ça fonctionne super bien !

Amicalement.

[francky76]

Une dernière petite chose, mais la cela me parait plus compliqué à mon avis.
Les 3 valeurs s'affichent sans soucis, mais est-t-il possible de les afficher
avec 3 couleurs différentes ?

Merci d'avance

[ticroch]

ouep la il faut les afficher dans des divs ou des span et rajouter le style

Code :

1
2
3
4
5
6
 
var s = "<div style='color:red'>" + total.toFixed(2) + " €</div>";
s += "<div style='color:blue'>" + total_40.toFixed(2) + " €</div>";
s += "<div style='color:green'>" + total_50.toFixed(2) + " €</div>";
 
document.getElementById('lbTotalBrut').innerHTML = s;

Voila la tes 3 lignes seront dans l'ordre rouge bleue verte

[francky76]

Super , merci
Amicalement