Calcul prix avec boutons radios
Résolu/Fermé
Paela318
Messages postés
17
Date d'inscription
mardi 18 septembre 2012
Statut
Membre
Dernière intervention
11 mai 2013
-
10 mai 2013 à 22:32
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 11 mai 2013 à 00:18
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 11 mai 2013 à 00:18
A voir également:
- Calcul prix avec boutons radios
- Radios françaises - Télécharger - Médias et Actualité
- Calcul moyenne excel - Guide
- Gta 6 prix - Accueil - Jeu vidéo
- Prix licence windows 10 - Accueil - Installation
- Comment réinitialiser un téléphone avec les boutons - Guide
10 réponses
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
10 mai 2013 à 22:33
10 mai 2013 à 22:33
Hello, Je vais t'aider, je prends connaissance de ton code et je reviens vers toi
Paela318
Messages postés
17
Date d'inscription
mardi 18 septembre 2012
Statut
Membre
Dernière intervention
11 mai 2013
10 mai 2013 à 22:39
10 mai 2013 à 22:39
Merci, c'est super !
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
Modifié par prosthetiks le 10/05/2013 à 22:59
Modifié par prosthetiks le 10/05/2013 à 22:59
Voici voila !
<html>
<head>
<title></title>
</head>
<body>
<div id="choix">
<legend>1) Choix finition</legend>
<p><!-- Les radios -->
<input type="radio" name="finition" checked="checked" id="plexi" value="20"/> <label for="a">Plexiglas</label><br/>
<input type="radio" name="finition" id="alu" value="30" /> <label for="b">Aluminium / Dibond</label><br/>
</p>
<legend>2) Choix format (portrait)</legend>
<p><!-- Les radios -->
<input type="radio" name="format" checked="checked" id="petit" value="15" /> <label for="c">60x60 cm</label><br/>
<input type="radio" name="format" id="moyen" value="25" /> <label for="d">100x100 cm</label><br/>
<input type="radio" name="format" id="grand" value="35" /> <label for="e">140x140 cm</label><br/>
</p>
<legend>3) Choix support</legend>
<p><!-- Les radios -->
<input type="radio" name="support" checked="checked" id="toile" value="40" /> <label for="f">Toile</label><br/>
<input type="radio" name="support" id="bois" value="60" /> <label for="g">Bois</label><br/>
</p>
Prix: <span id="prix"></span>
<button onclick="superCalculateur.calculeLePrixDeMalade()">Calculer</button>
</body>
<script type="text/javascript">
var superCalculateur = {
calculeLePrixDeMalade: function(){
var total = 0;
// On récupère tous les inputs
var elements = document.getElementsByTagName('input');
// on boucle sur les éléments récupérés afin de traiter chaque input séparément
for(var element in elements){
var current = elements[element];
// On teste si input est de type Objet, qu'il soit bien de type radio (il pourrait y avoir des input d'autre type, genre text ou password), et enfin qu'il soit coché.
if(typeof current == 'object' && current.getAttribute('type') == 'radio' && current.checked){
// Ce code sera exécuté uniquement par les inputs de type radio et qui sont cochés. On récupère donc leur valeur et on l'additionne avec la valeur actuelle de la variable total (le += est un raccourcis pour total = total + current.value)
total += parseFloat(current.value);
}
}
// Une fois la boucle terminée, on affiche le contenu de la variable total
alert('Total: ' + total);
}
}
</script>
</html>
Paela318
Messages postés
17
Date d'inscription
mardi 18 septembre 2012
Statut
Membre
Dernière intervention
11 mai 2013
10 mai 2013 à 23:14
10 mai 2013 à 23:14
Super c'est exactement le résultat que je voulais ! Si tu as un peu de temps à m'offrir encore, j'aimerai te poser quelques questions sur le code (je sais je suis chiant mais j'aime tout comprendre mdr).
- Tout d'abord, pourquoi as tu créé la première variable superCalculateur, à quoi sert elle ?
- Ensuite, je ne comprends pas comment marche la boucle :/
Encore merci pour ton aide !
- Tout d'abord, pourquoi as tu créé la première variable superCalculateur, à quoi sert elle ?
- Ensuite, je ne comprends pas comment marche la boucle :/
Encore merci pour ton aide !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
Modifié par prosthetiks le 10/05/2013 à 23:44
Modifié par prosthetiks le 10/05/2013 à 23:44
J'ai créer cette première variable afin d'encapsuler ma fonction, ce n'est pas obligatoire, mais ça permet de mieux organiser son code et d'éviter les conflits avec des fonctions du même nom qui pourraient être déclarées dans d'autres scripts présent dans la même page.
Il y a des noms de fonction relativement courants (du genre getName()) qu'on risque de re-déclarer accidentellement. Je peux donc, grâce à ce système, déclarer une fonction de ce nom même si elle existe déja dans un script chargé précédemment.
C'est une sorte de namespace (je te renvoie à google pour une définition complète des namespaces, disponibles dans la plupart des langages récents)
Décortiquons maintenant le comportement de la boucle:
On commence par récupérer les inputs avec celle ligne:
elements est maintenant un tableau dont chaque entrée contient un input différent.
Concrètement, voici le contenu de la variable elements:
On voit qu'on y trouve, de l'index 0 à 6, les différents inputs de la page.
à l'index 7, qui à comme clé "length", on trouve la longueur totale du tableau. Cette entrée est ajoutée automatiquement par la méthode "getElementsByTagName", ce qui va nous ennuyer lors de notre boucle, on y reviendra en temps voulu.
La boucle:
La ligne
La boucle va donc être exécutée 8 fois, et la variable element (qui est crée à la volée), contiendra à chaque fois la clé du tableau pour l'élément en cours.
Voici les valeurs de element pour chaque passage dans la boucle:
Passage 1: element = 0
Passage 2: element = 1
Passage 3: element = 2
Passage 4: element = 3
Passage 5: element = 4
Passage 6: element = 5
Passage 7: element = 6
Passage 8: element = length
Entrons maintenant dans la boucle.
On y trouve cette ligne:
Donc au premier passage dans la boucle, on va récupérer la valeur qui se trouve dans elements à l'index 0.
Si on reprend le contenu de notre tableau elements, on voit qu'a l'index 0 on trouve: input#plexi
La ligne suivante est:
Nous avons donc 3 conditions séparées par des & (ET). Il faut donc que les trois soient respectées pour qu'on entre dans la condition.
Admettons que notre input#plexi soit coché:
La variable est de type "object", elle est de type "radio" et elle possède l'attribut "checked".
On récupère donc sa valeur grâce à la ligne
Il y a juste une subtilité: On a vu que notre tableau elements contenait la longue du tableau (à l'index length). Cette entrée n'est pas un objet, c'est un string (une chaine de caractère), c'est pour ça que j'ai mis la condition typeof current == 'object'. Sans elle, j'aurais tenté d'appeler la fonction getAttribute sur une chaine de caractère, hors elle ne la possède pas et mon script aurait planté.
J'espère que cette explication est assez claire :/
Il y a des noms de fonction relativement courants (du genre getName()) qu'on risque de re-déclarer accidentellement. Je peux donc, grâce à ce système, déclarer une fonction de ce nom même si elle existe déja dans un script chargé précédemment.
C'est une sorte de namespace (je te renvoie à google pour une définition complète des namespaces, disponibles dans la plupart des langages récents)
Décortiquons maintenant le comportement de la boucle:
On commence par récupérer les inputs avec celle ligne:
var elements = document.getElementsByTagName('input');
elements est maintenant un tableau dont chaque entrée contient un input différent.
Concrètement, voici le contenu de la variable elements:
0: input#plexi 1: input#alu 2: input#petit 3: input#moyen 4: input#grand 5: input#toile 6: input#bois length: 7
On voit qu'on y trouve, de l'index 0 à 6, les différents inputs de la page.
à l'index 7, qui à comme clé "length", on trouve la longueur totale du tableau. Cette entrée est ajoutée automatiquement par la méthode "getElementsByTagName", ce qui va nous ennuyer lors de notre boucle, on y reviendra en temps voulu.
La boucle:
La ligne
for(var element in elements){. Si on la traduisait en français, elle pourrait se transcrire de la sorte: Pour chaque element présent dans elements, passe dans la boucle.
La boucle va donc être exécutée 8 fois, et la variable element (qui est crée à la volée), contiendra à chaque fois la clé du tableau pour l'élément en cours.
Voici les valeurs de element pour chaque passage dans la boucle:
Passage 1: element = 0
Passage 2: element = 1
Passage 3: element = 2
Passage 4: element = 3
Passage 5: element = 4
Passage 6: element = 5
Passage 7: element = 6
Passage 8: element = length
Entrons maintenant dans la boucle.
On y trouve cette ligne:
var current = elements[element];
Donc au premier passage dans la boucle, on va récupérer la valeur qui se trouve dans elements à l'index 0.
Si on reprend le contenu de notre tableau elements, on voit qu'a l'index 0 on trouve: input#plexi
La ligne suivante est:
if(typeof current == 'object' && current.getAttribute('type') == 'radio' && current.checked){
Nous avons donc 3 conditions séparées par des & (ET). Il faut donc que les trois soient respectées pour qu'on entre dans la condition.
Admettons que notre input#plexi soit coché:
La variable est de type "object", elle est de type "radio" et elle possède l'attribut "checked".
On récupère donc sa valeur grâce à la ligne
total += parseFloat(current.value);et on procède ainsi pour tous les éléments du tableau.
Il y a juste une subtilité: On a vu que notre tableau elements contenait la longue du tableau (à l'index length). Cette entrée n'est pas un objet, c'est un string (une chaine de caractère), c'est pour ça que j'ai mis la condition typeof current == 'object'. Sans elle, j'aurais tenté d'appeler la fonction getAttribute sur une chaine de caractère, hors elle ne la possède pas et mon script aurait planté.
J'espère que cette explication est assez claire :/
Paela318
Messages postés
17
Date d'inscription
mardi 18 septembre 2012
Statut
Membre
Dernière intervention
11 mai 2013
10 mai 2013 à 23:55
10 mai 2013 à 23:55
J'ai du la lire trois fois pour comprendre mais là j'ai bien compris. Merci pour te donner autant de mal pour réussir à m'expliquer tout ça, mais ça me servira :) Et aussi j'ai beau lire les références du ParseFloat et ParseInt, je n'arrive pas à bien comprendre leur fonction, si tu pouvais encore m'éclairer sur ce point j'aurai absolument tout compris ! :)
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
11 mai 2013 à 00:05
11 mai 2013 à 00:05
Voici un exemple avec une petite explication (qui est en cours de rédaction ;) ):
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var superCalculateur = {
calculeLePrixDeMalade: function(){
var stringValue = '10';
var intValue = 10;
var floatValue = 10.5;
var v0 = stringValue + intValue + floatValue;
var v1 = parseInt(stringValue) + parseInt(intValue) + parseInt(floatValue);
var v2 = parseFloat(stringValue) + parseFloat(intValue) + parseFloat(floatValue);
alert('Sans parser:' + v0 + ' Avec parseInt: ' + v1 + ' avec parseFloat: ' + v2);
}
}
superCalculateur.calculeLePrixDeMalade();
</script>
</html>
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
Modifié par prosthetiks le 11/05/2013 à 00:13
Modifié par prosthetiks le 11/05/2013 à 00:13
Je déclare donc trois variables:
stringValue est une chaine de caractère (elle est définie entre guillemets)
intValue est un nombre entier (ou int)
floatValue est un nombre à virgule (ou float)
La fonction parseInt permet de convertir une variable en entier
La fonction parseFloat permet de convertir une variable en nombre à virgule
Je fais donc trois calculs différents:
#1
le signe plus servant aussi comme opérateur de concaténation et stringValue étant une chaine de caractère, il va concaténer les trois valeurs et on va obtenir comme valeur: 101010.5
C'est pas ce qu'on veut ! :(
Essayons donc avec parseInt !
#2
StringValue vaut maintenant 10 et non plus '10' (Il a été converti en entier)
intValue = 10
floatValue = 10 (on a perdu la virgule, on vient de le convertir en entier)
Le résultat du tout est 30, c'est faux ! :(
#3
Reste à tester parseFloat, et en convertissant toutes nos variables avec, on garde la précision de floatValue tout en rendant possible le calcul.
var stringValue = '10';
var intValue = 10;
var floatValue = 10.5;
stringValue est une chaine de caractère (elle est définie entre guillemets)
intValue est un nombre entier (ou int)
floatValue est un nombre à virgule (ou float)
La fonction parseInt permet de convertir une variable en entier
La fonction parseFloat permet de convertir une variable en nombre à virgule
Je fais donc trois calculs différents:
#1
var v0 = stringValue + intValue + floatValue;
le signe plus servant aussi comme opérateur de concaténation et stringValue étant une chaine de caractère, il va concaténer les trois valeurs et on va obtenir comme valeur: 101010.5
C'est pas ce qu'on veut ! :(
Essayons donc avec parseInt !
#2
var v1 = parseInt(stringValue) + parseInt(intValue) + parseInt(floatValue);
StringValue vaut maintenant 10 et non plus '10' (Il a été converti en entier)
intValue = 10
floatValue = 10 (on a perdu la virgule, on vient de le convertir en entier)
Le résultat du tout est 30, c'est faux ! :(
#3
Reste à tester parseFloat, et en convertissant toutes nos variables avec, on garde la précision de floatValue tout en rendant possible le calcul.
Paela318
Messages postés
17
Date d'inscription
mardi 18 septembre 2012
Statut
Membre
Dernière intervention
11 mai 2013
11 mai 2013 à 00:17
11 mai 2013 à 00:17
Oua merci ! Tu t'es vraiment donné du mal, ça fait plaisir de voir que des gens se donnent autant de mal encore sur les forums :) En tout cas t'as réussi à répondre à mon sujet et à tout m'expliquer, encore merci :)
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
431
11 mai 2013 à 00:18
11 mai 2013 à 00:18
De rien, au plaisir :) Bonne suite !