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

Simulateur de pseudo calories (débutant)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager