Afficher le prix total, incompréhension du code

**Hug0x5** · 11/05/2019, 21h26

Bonjour, j'essaye de comprendre le code de ce programme, mais je ne voit pas comment afficher le prix total, soit car je ne comprend pas soit simplement car ce n'est pas dans le code. Si quelqu'un pouvait m'aider à l'afficher..
Ce code vient du post suivant : https://www.developpez.net/forums/d9...ntites-select/

Cordialement.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
                /* BASE */
                body {
                        background-color:#dcdcdc;
                        color:#000000;
                        font-family:sans-serif;
                        font-size:medium;
                        font-style:normal;
                        font-weight:normal;
                        line-height:normal;
                        letter-spacing:normal;
                }
                h1,h2,h3,h4,h5 {
                        font-family:serif;
                }
                div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                        margin:0px;
                        padding:0px;
                }
                p {
                        padding:6px;
                }
                ul,ol,dl {
                        list-style:none;
                        padding-left:6px;
                        padding-top:6px;
                }
                li {
                        padding-bottom:6px;
                }
                div#conteneur {
                        width:95%;
                        margin:12px auto;
                        padding:6px;
                        background-color:#FFFFFF;
                        color:#000000;
                        border:1px solid #666666;
                        font-size:0.8em;
                }               
                div#affiche {
                        margin:12px;
                        padding:6px;
                        border:1px solid #999999;
                        background-color:#FFFFFF;
                        color:#000000;
                }
 
                /* TEST */
                select {
                        margin:12px;
                }
        </style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script>
                $(function(){
                        $("[id^='entree']").change(function(){
                                var total = 0;
 
                                $("select[id^='entree']").each(function(i,item){
                                        total += parseFloat($(item).prev().text())*$(item).val();
                                });
 
                                $("#total").text(total.toFixed(2) + " €");
                        });
                });
        </script>
</head>
<body>
	<div id="conteneur">
		<div id="prixEntree1">0.30 €</div>
		<select id="entree1">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree2">0.30 €</div>
		<select id="entree2">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree3">0.30 €</div>
		<select id="entree3">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="total"></div>
	</div>
</body>  
</html>

**psychadelic** · 12/05/2019, 15h56

Faudrait d'abord que tu utilise la balise code, de l'interface de developpez ( le bouton avec le symbole #

sinon quelle est ta difficulté ?
le montant calculé est placé par cette instruction : $("#total").text(total.toFixed(2) + " €");pour le reste, c'est dans les doc :
Shorthand for $( document ).ready() => https://learn.jquery.com/using-jquer...ocument-ready/

function => https://developer.mozilla.org/fr/doc...saire/Fonction
parseFloat => https://developer.mozilla.org/fr/doc...aux/parseFloat
toFixed() => https://developer.mozilla.org/fr/doc...Number/toFixed

jQuery each => https://api.jquery.com/each/

jQuery WildCard ^ => http://api.jquery.com/attribute-starts-with-selector/

tous les jQuery WildCard => http://api.jquery.com/category/selectors/

jQuery .prev() => https://api.jquery.com/prev/

jQuery change() => https://api.jquery.com/change/

et, oui, les documentation ça existe et il faut les utiliser

sinon ce code est un peu bancal => il ne calcul pas le total lors du chargement de la page.
Il faudrait mieux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    $(function ()                               // une fois la page chargée...   
    {
      CalcTotal();                             // calcul du total lors du chargement de la page
 
      $("[id^='entree']").change(CalcTotal);  // se déclenche du changement d'un des éléments ayant pour id="entree ...
 
      function CalcTotal()                   // la fonction qui fait le calcul le total
      {
        let total = 0;                                                  // init du total
        $("select[id^='entree']").each(function ()                     // pour chacune des "entree ( entree1 / entree2 / entree3)
        {
          total += parseFloat($(this).prev().text()) * $(this).val(); // retrouve le prix indiqué sur le parent et l'ajoute au total
        });
 
        $("#total").text(total.toFixed(2) + " €");                  // affiche le prix sur l'IHM
      }
    });

**Hug0x5** · 12/05/2019, 18h07

Ce que je ne comprend pas, c'est comment afficher le montant total
Merci de la réponse

**psychadelic** · 12/05/2019, 19h22

le montant calculé est placé par cette instruction : $("#total").text(total.toFixed(2) + " €");

tiens, c'en est un que je n'avais pas référencé... jQuery text() => http://api.jquery.com/text/

**Hug0x5** · 12/05/2019, 19h34

Merci mais je ne voit pas trop comment le lier à la fonction total pour qu'elle soit affiché, je ne comprend pas vraiment

Comment dois-je mettre la fonction dans le code ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
                /* BASE */
                body {
                        background-color:#dcdcdc;
                        color:#000000;
                        font-family:sans-serif;
                        font-size:medium;
                        font-style:normal;
                        font-weight:normal;
                        line-height:normal;
                        letter-spacing:normal;
                }
                h1,h2,h3,h4,h5 {
                        font-family:serif;
                }
                div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                        margin:0px;
                        padding:0px;
                }
                p {
                        padding:6px;
                }
                ul,ol,dl {
                        list-style:none;
                        padding-left:6px;
                        padding-top:6px;
                }
                li {
                        padding-bottom:6px;
                }
                div#conteneur {
                        width:95%;
                        margin:12px auto;
                        padding:6px;
                        background-color:#FFFFFF;
                        color:#000000;
                        border:1px solid #666666;
                        font-size:0.8em;
                }               
                div#affiche {
                        margin:12px;
                        padding:6px;
                        border:1px solid #999999;
                        background-color:#FFFFFF;
                        color:#000000;
                }
 
                /* TEST */
                select {
                        margin:12px;
                }
        </style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script>
                $(function ()                               // une fois la page chargée...   
    {
      CalcTotal();                             // calcul du total lors du chargement de la page
 
      $("[id^='entree']").change(CalcTotal);  // se déclenche du changement d'un des éléments ayant pour id="entree ...
 
      function CalcTotal()                   // la fonction qui fait le calcul le total
      {
        let total = 0;                                                  // init du total
        $("select[id^='entree']").each(function ()                     // pour chacune des "entree ( entree1 / entree2 / entree3)
        {
          total += parseFloat($(this).prev().text()) * $(this).val(); // retrouve le prix indiqué sur le parent et l'ajoute au total
        });
 
        $("#total").text(total.toFixed(2) + " €");                  // affiche le prix sur l'IHM
      }
    });
</script>
</head>
<body>
	<div id="conteneur">
		<div id="prixEntree1">0.30 €</div>
		<select id="entree1">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree2">0.30 €</div>
		<select id="entree2">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree3">0.30 €</div>
		<select id="entree3">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="total"></div>
	</div>
</body>  
</html>

**psychadelic** · 12/05/2019, 20h54

bon, on va décomposer : $("#total").text(total.toFixed(2) + " €");la première chose à voir, c'est que sur cette ligne il y a plusieurs instructions "en même temps"

dans la partie HTML on a : <div id="total"></div>ce que l'on cherche à obtenir c'est d'avoir à cet emplacement HTML quelque chose ressemblant à <div id="total">0.60 €</div> ( par exemple).

pour avoir ce résultat d'exemple l'instruction jQuery serai : $("#total").text("0.60 €");mais comme ct"est un montant calculé contenu dans la variable total on devrai écrire $("#total").text(total);sauf que, toujours dans cet exemple total à pour valeur 0.6 et qu'on se retrouverai avec <div id="total">0.6</div>pour que 0.6 soit transformé en 0.60 € il faut 2 choses :
1- avoir 2 décimales après la virgule , c'est ce que fait total.toFixed(2) qui transforme 0.6 => 0.602- lui ajouter le symbole euro € (avec un espace devant.

en programmant de manière lourdingue on écrit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var str_Total_2_decimales = total.toFixed(2);
var str_Total_Monnaie       = str_Total_2_decimales + " €";
 
$("#total").text(str_Total_Monnaie);

Afficher le prix total, incompréhension du code

jQuery

Vue hybride

Discussions similaires

Partager

Partager