Simulateur de pseudo calories (débutant)

**QuienSabe** · 21/07/2010, 19h31

Bonjour à tous,

Mon script ne marche pas du tout ! Pourriez-vous me dire où est-ce que j'ai boggé ?!?
Je cherche "juste" à faire des additions et à afficher le résultat dans un alert (pour l'instant)

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
       <script type="text/javascript">
function calculer() {
var valCalories=0 ;
 
document.simulateur.patates[0].checked ? valCalories+=450 ;
document.simulateur.carottes[0].checked ? valCalories+=120 ;
if (document.simulateur.courges[0].checked) valCalories+= 250 ;
if (document.simulateur.oignons[0].checked) valCalories+=100 ;
if (document.simulateur.poireaux[0].checked) valCalories+=150 ;
if (document.simulateur.sel[0].checked) valCalories+=30 ;
 
 alert("Votre total est de: " + valCalories + "pseudo calories!");
 
}
       </script>
 
  </head>
  <body>
    <form name="simulateur">
<p><b>Le premier simulateur de soupe !</b></p>
<p>Mettrez-vous des pommes de terre dans votre soupe ? <br>
<input type="radio" name="patates" value="0" checked> Oui
<input type="radio" name="patates" value="1"> Non </p>
<p>Mettrez-vous des carottes dans votre soupe ? <br>
<input type="radio" name="carottes" value="0" checked> Oui
<input type="radio" name="carottes" value="1"> Non </p>
<p><b>Options</b></p>
<input type="checkbox" name="courges" value="0"> Ajouter des courges ? <br>
<input type="checkbox" name="oignons" value="1"> Ajouter des oignons ? <br>
<input type="checkbox" name="poireaux" value="2"> Ajouter des poireaux ? <br>
<input type="checkbox" name="sel" value="3"> Ajouter du sel ? <br>
<p><input type="button" value="Calculer" onclick="calculer()"></p>
</form>
  </body>
</html>

D'avance merci.

**Bovino** · 21/07/2010, 20h14

Code :

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

document.simulateur.patates[0].checked ? valCalories+=450 ;

Comme son nom l'indique, l'opérateur ternaire

Code :

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

test ? code_si_vrai : code_si_faux;

Nécessite 3 éléments : le test à réaliser, le résultat si le test est vérifié et le résultat si le test échoue.
Si tu enlèves un des éléments, ça provoque une erreur !

A part ça,

Mon script ne marche pas du tout !

c'est pas très explicite pour décrire ce qui ne va pas

**SpaceFrog** · 21/07/2010, 20h19

Autre syntaxe possible:

Code :

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

document.simulateur.patates[0].checked && valCalories+=450 ;

le second membre ne sera interprété que si le premier est vrai

**QuienSabe** · 21/07/2010, 20h21

Merci Bovino,

J'ai fait la modif de:

Code :

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

1
2
document.simulateur.patates[0].checked ? valCalories+=450 :  valCalories+=0 ;
document.simulateur.carottes[0].checked ? valCalories+=120 :  valCalories+=0;

mais ça ne change rien. Pas d'erreur non plus $!?

**Bovino** · 21/07/2010, 20h37

Envoyé par QuienSabe

Pas d'erreur non plus $!?

Si ! Avec Firebug :

document.simulateur.courges[0] is undefined

Si tu n'as qu'un seul élément dont le name est courges,

Code :

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

document.simulateur.courges

renvoie cet élément, pas une collection.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function calculer() {
var valCalories=0 ;
 
document.simulateur.patates[0].checked ? valCalories+=450 : valCalories+= 0 ;
document.simulateur.carottes[0].checked ? valCalories+=120 : valCalories+= 0;
if (document.simulateur.courges.checked) valCalories+= 250 ;
if (document.simulateur.oignons.checked) valCalories+=100 ;
if (document.simulateur.poireaux.checked) valCalories+=150 ;
if (document.simulateur.sel.checked) valCalories+=30 ;
 
 alert("Votre total est de: " + valCalories + "pseudo calories!");
 
}

Fonctionne

**SpaceFrog** · 21/07/2010, 20h38

Il n'y a de collection que si plusieurs elements portent le même name
donc pour oignons courges sel pas de [0]

pour la première ligne j'ai mis en exemple une syntaxe plus stricte ...

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function calculer() {
var valCalories=0 ;
document.forms['simulateur'].elements['patates'][0].checked && (valCalories +=450) ;
document.simulateur.carottes[0].checked && (valCalories +=120) ;
document.simulateur.courges.checked && (valCalories +=250) ;
document.simulateur.oignons.checked && (valCalories +=100) ;
document.simulateur.poireaux.checked && (valCalories +=150) ;
document.simulateur.sel.checked && (valCalories +=30) ;
 
 alert("Votre total est de: " + valCalories + " pseudo calories!");
 
}
 </script>
 
  </head>
  <body>
    <form name="simulateur">
<p><b>Le premier simulateur de soupe !</b></p>
<p>Mettrez-vous des pommes de terre dans votre soupe ? <br>
<input type="radio" name="patates" value="0" checked> Oui
<input type="radio" name="patates" value="1"> Non </p>
<p>Mettrez-vous des carottes dans votre soupe ? <br>
<input type="radio" name="carottes" value="0" checked> Oui
<input type="radio" name="carottes" value="1"> Non </p>
<p><b>Options</b></p>
<input type="checkbox" name="courges" value="0"> Ajouter des courges ? <br>
<input type="checkbox" name="oignons" value="1"> Ajouter des oignons ? <br>
<input type="checkbox" name="poireaux" value="2"> Ajouter des poireaux ? <br>
<input type="checkbox" name="sel" value="3"> Ajouter du sel ? <br>
<p><input type="button" value="calculer" onclick="calculer()"></p>
</form>
  </body>
</html>

**Bovino** · 21/07/2010, 20h56

Envoyé par SpaceFrog

Il n'y a de collection que si plusieurs elements portent le même name
donc pour oignons courges sel pas de [0]

pour la première ligne j'ai mis en exemple une syntaxe plus stricte ...

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function calculer() {
var valCalories=0 ;
document.forms['simulateur'].elements['patates'][0].checked && (valCalories +=450) ;
document.simulateur.carottes[0].checked && (valCalories +=120) ;
document.simulateur.courges.checked && (valCalories +=250) ;
document.simulateur.oignons.checked && (valCalories +=100) ;
document.simulateur.poireaux.checked && (valCalories +=150) ;
document.simulateur.sel.checked && (valCalories +=30) ;
 
 alert("Votre total est de: " + valCalories + " pseudo calories!");
 
}
 </script>
 
  </head>
  <body>
    <form name="simulateur">
<p><b>Le premier simulateur de soupe !</b></p>
<p>Mettrez-vous des pommes de terre dans votre soupe ? <br>
<input type="radio" name="patates" value="0" checked> Oui
<input type="radio" name="patates" value="1"> Non </p>
<p>Mettrez-vous des carottes dans votre soupe ? <br>
<input type="radio" name="carottes" value="0" checked> Oui
<input type="radio" name="carottes" value="1"> Non </p>
<p><b>Options</b></p>
<input type="checkbox" name="courges" value="0"> Ajouter des courges ? <br>
<input type="checkbox" name="oignons" value="1"> Ajouter des oignons ? <br>
<input type="checkbox" name="poireaux" value="2"> Ajouter des poireaux ? <br>
<input type="checkbox" name="sel" value="3"> Ajouter du sel ? <br>
<p><input type="button" value="calculer" onclick="calculer()"></p>
</form>
  </body>
</html>

Il me plait bien ton code Spaffy !

**SpaceFrog** · 21/07/2010, 20h59

Tu m'as devancé Beef

Avec deux doigts en moins je tapes moins vite

**QuienSabe** · 21/07/2010, 21h04

Merci à tous pour vos réponses, c'est nettement plus clair pour moi, maintenant

Juste une question concernant la syntaxe plus stricte de la première ligne dans l'exemple de SpaceFrog.
Est-ce par souci de compatibilité multi browsers ?

Et puis aussi, comment je fais pour mettre "Résolu" ? Je vois pas le bouton ?

**QuienSabe** · 21/07/2010, 21h07

Oups ! J'ai trouvé le bouton Résolu

Il fallait d'abord envoyer la réponse pour le voir

**SpaceFrog** · 21/07/2010, 22h56

Est-ce par souci de compatibilité multi browsers ?

entre autre...
Aussi pour éviter les confusions possibles entre variables et élements du DOM certains utilisent parfois maladroitements des id comme nom de variables ...

**QuienSabe** · 22/07/2010, 11h19

Bonjour à tous,

Je reviens vers vous non pour vous resservir la soupe mais un peu quand même parce que j'ai fait une petite modif.

En effet, j'ai ajouté au script le nombre de louche par assiette avec une liste de sélection.

J'ai fait pas mal de recherche sur comment récupérer la valeur d'une sélection mais mes mises en pratique ne sont pas brillantes

J'ai rajouté une variable valLouches qui vaut 50 en init parce que l'item 1 de la liste "nbrLouches" est sélectionné par défaut.

Ensuite j'ai voulu affecté à cette nouvelle variable la valeur de l'index sélectionné...

Code :

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

valLouches = document.simulateur.nbrLouches.selectedIndex.value ;  // marche pas !

mais sans succès.
J'ai aussi essayé:

Code :

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

valLouches = document.getElementById("nbrLouches").value ;  // marche pas non plus !

Ensuite je voulais incrementer valCalories par la valeur de chaque louche

Code :

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

valCalories == valCalories+=valLouches ;

mais comme je bogue avant, rien ne se passe...
BTW pour Bovino, si Firebug peut déboguer mon script, je vois pas quelle manip je dois faire... Je l'ai téléchargé hier.

Je vous place le code complet de la page ci-dessous en sachant bien que ça fonctionne SANS ma modif.

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<script type="text/javascript">
function calculer() {
var valCalories=0 ;
var valLouches=50 ;
document.forms['simulateur'].elements['patates'][0].checked && (valCalories +=450) ;
document.simulateur.carottes[0].checked && (valCalories +=120) ;
document.simulateur.courges.checked && (valCalories +=250) ;
document.simulateur.oignons.checked && (valCalories +=100) ;
document.simulateur.poireaux.checked && (valCalories +=150) ;
document.simulateur.sel.checked && (valCalories +=30) ;
 
/*valLouches = document.simulateur.nbrLouches.selectedIndex.value ; */ // marche pas !
valLouches = document.getElementById("nbrLouches").value ;  // marche pas non plus !
 
valCalories == valCalories+=valLouches ;
 
 alert("Votre total est de: " + valCalories + " pseudo calories pour une assiette !");
 
}
 </script>
 
  </head>
  <body>
    <form name="simulateur">
      <p><b>Le premier simulateur de soupe !</b></p>
      <p>Mettrez-vous des pommes de terre dans votre soupe ? <br>
      <input type="radio" name="patates" value="0" checked> Oui
      <input type="radio" name="patates" value="1"> Non </p>
      <p>Mettrez-vous des carottes dans votre soupe ? <br>
      <input type="radio" name="carottes" value="0" checked> Oui
      <input type="radio" name="carottes" value="1"> Non </p>
      <p><b>Options</b></p>
      <input type="checkbox" name="courges" value="0"> Ajouter des courges ? <br>
      <input type="checkbox" name="oignons" value="1"> Ajouter des oignons ? <br>
      <input type="checkbox" name="poireaux" value="2"> Ajouter des poireaux ? <br>
      <input type="checkbox" name="sel" value="3"> Ajouter du sel ? <br>
      <p><b>Sélectionnez le nombre de louches par assiette</b></p>
      <select name="nbrLouches" size="1">
      <option value="50" id="1" selected="selected">1</option>
      <option value="90" id="2">2</option>
      <option value="130" id="3">3</option>
      <option value="185" id="4">4</option>
      <option value="245" id="5">5</option>
      <option value="280" id="6">6</option>
      </select>
      <p><input type="button" value="calculer" onclick="calculer()"></p>
    </form>
  </body>
</html>

D'avance merci pour vos lumières !

**SpaceFrog** · 22/07/2010, 11h53

Hormis le fait que j'aurais multiplié pour le nombre de louches, mais je te laisse le coté diététique ...

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<script type="text/javascript">
function calculer() {
var valCalories=0 ;
var valLouches=50 ;
document.forms['simulateur'].elements['patates'][0].checked && (valCalories +=450) ;
document.simulateur.carottes[0].checked && (valCalories +=120) ;
document.simulateur.courges.checked && (valCalories +=250) ;
document.simulateur.oignons.checked && (valCalories +=100) ;
document.simulateur.poireaux.checked && (valCalories +=150) ;
document.simulateur.sel.checked && (valCalories +=30) ;
 
/*valLouches = document.simulateur.nbrLouches.selectedIndex.value ; */ // marche pas !
valLouches = document.getElementById("nbrLouches").value ;  // marche pas non plus !
 
valCalories == valCalories+=valLouches ;
 
 alert("Votre total est de: " + valCalories + " pseudo calories pour une assiette !");
 
}
 </script>
 
  </head>
  <body>
    <form name="simulateur">
      <p><b>Le premier simulateur de soupe !</b></p>
      <p>Mettrez-vous des pommes de terre dans votre soupe ? <br>
      <input type="radio" name="patates" value="0" checked> Oui
      <input type="radio" name="patates" value="1"> Non </p>
      <p>Mettrez-vous des carottes dans votre soupe ? <br>
      <input type="radio" name="carottes" value="0" checked> Oui
      <input type="radio" name="carottes" value="1"> Non </p>
      <p><b>Options</b></p>
      <input type="checkbox" name="courges" value="0"> Ajouter des courges ? <br>
      <input type="checkbox" name="oignons" value="1"> Ajouter des oignons ? <br>
      <input type="checkbox" name="poireaux" value="2"> Ajouter des poireaux ? <br>
      <input type="checkbox" name="sel" value="3"> Ajouter du sel ? <br>
      <p><b>Sélectionnez le nombre de louches par assiette</b></p>
      <select name="nbrLouches" size="1">
      <option value="50" id="1" selected="selected">1</option>
      <option value="90" id="2">2</option>
      <option value="130" id="3">3</option>
      <option value="185" id="4">4</option>
      <option value="245" id="5">5</option>
      <option value="280" id="6">6</option>
      </select>
      <p><input type="button" value="calculer" onclick="calculer()"></p>
    </form>
  </body>
</html>

**QuienSabe** · 22/07/2010, 12h10

Ah oui, mais la multiplication c'est d'un niveau déjà bien supérieur !
Je connais depuis hier seulement le += et par déduction le -=, mais de là à aller jusqu'au *= voire le /= , je suis pas fou !
D'autant que l'addition ne fonctionne pas toujours...
CQFD.

Alors je planche sur des tuts basics que j'ai trouvé...

**SpaceFrog** · 22/07/2010, 12h19

D'autant que l'addition ne fonctionne pas toujours...

quoi il ne fonctionne pas mon code ?

**QuienSabe** · 22/07/2010, 12h21

Savez-vous pourquoi :

Code :

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

valLouches = document.forms['simulateur'].elements['nbrLouches'].selectedIndex.value ;

valLouches n'obtient pas la valeur de l'index sélectionné ?
Qu'y-a-t-il de faux dans cette ligne ?

**SpaceFrog** · 22/07/2010, 12h33

c'est l'option qui a une value ...
si tu tiesn à utiliser cett syntaxe très lourde :

Code :

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

valLouches = document.forms['simulateur'].elements['nbrLouches'].options[document.forms['simulateur'].elements['nbrLouches'].selectedIndex].value ;

un raccourci :

Code :

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

valLouches = document.forms['simulateur'].elements['nbrLouches'].value

**QuienSabe** · 22/07/2010, 13h32

Envoyé par SpaceFrog

Code :

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

valLouches = document.forms['simulateur'].elements['nbrLouches'].value

Ah mais je préfère nettement cette syntaxe mais comme j'ai presque tout essayé pour obtenir cette *§/]% value... Soit:

Code :

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

1
2
3
4
5
/*valLouches = document.simulateur.nbrLouches.selectedIndex.value ; */ // marche pas !
//valLouches = document.getElementById("nbrLouches").value ;  // marche pas non plus !
//valLouches = document.forms['simulateur'].elements['nbrLouches'].selectedIndex.value ; // marche pas non plus !
valLouches = document.forms['simulateur'].elements['nbrLouches'].value ; // marche pas non plus !
valCalories == valCalories+=valLouches ;

J'en déduis que le problème est ailleurs... Reste à savoir où ?

Dis SpaceFrog, quand tu écris : "quoi il ne fonctionne pas mon code ?" tu plaisantes je suppose ?
Parce que si je compare dans PsPad les deux fichiers de base, ils sont rigoureusement identiques. Donc c'est bien une blague, exact ?

**SpaceFrog** · 22/07/2010, 14h38

je pense que tu n'as pas du lire mon code précédent

Code :

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

valCalories == valCalories+=valLouches ;

ça c'est...comment dire? très exotique !

**QuienSabe** · 22/07/2010, 14h54

Ben si pourtant

Non seulement je l'ai lu, mais je l'ai même comparé avec le source d'origine dans PsPas qui n'a pas noté la moindre différence.
Mais c'est pas grave car ces déboires m'ont permis de découvrir Firebug et maintenant j'arrive à connaître les valeurs des variables avec des points d'arrêt et tout et tout

Bref, j'ai introduit une nouvelle variable "newVal " qui est censée récupérer l'addition de "valCalories" et "valLouches " mais pour l'instant je ne fais que les concaténer

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
18
19
<script type="text/javascript">
function calculer() {
var valCalories=0 ;
var valLouches=0 ;
var newVal = 0 ;
document.forms['simulateur'].elements['patates'][0].checked && (valCalories +=450) ;
document.simulateur.carottes[0].checked && (valCalories +=120) ;
document.simulateur.courges.checked && (valCalories +=250) ;
document.simulateur.oignons.checked && (valCalories +=100) ;
document.simulateur.poireaux.checked && (valCalories +=150) ;
document.simulateur.sel.checked && (valCalories +=30) ;
 
valLouches = document.forms['simulateur'].elements['nbrLouches'].value ;
newVal = valCalories+valLouches ;
 
 alert("Votre total est de: " + newVal + " pseudo calories pour une assiette !");
 
}
 </script>

Mais je sens que j'y suis presque...

Simulateur de pseudo calories (débutant)

JavaScript

Discussions similaires

Partager

Partager