Problème de variables cette fois.

**The_TooNZ** · 31/12/2014, 16h22

Re-bonjour, je vais essayer de ne pas faire d'erreur cette fois dans mon POST pour pas me le faire dire…

Voici, je crois que j'ai un problème de variable et je comprend pas c'est quoi le problème.
Voici mon code:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="style_div.css">
 
<style>
   div#titre {color: black;text-align: center; font-size: 20px;text-outline: 4px 4px #ff0000;}
</style>
 
<script language="JavaScript" type="text/javascript">

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
function cal() {
	var smoked=document.getElementById('smoked').value;
	var pack=document.getElementById('pack').value;
	var misc=document.getElementById('misc').value;
	var starter_kit=document.getElementById('starter_kit').value;
 
	var resultat=(smoked/20)*pack*365+misc/1;
	var eliquid=(smoked*0.0420)*365/12;
	var kit_mois=(starter_kit/365)*12;
	var brul_mois=7.18*12;
        var kit_annee=(7,18+eliquid+kit_mois)*12;
        var econo=resultat-kit_annee;
 
	document.getElementById('cig_annuel').innerHTML = resultat.toFixed(2)+'$ de cigarettes'; 
	document.getElementById('liquid_month').innerHTML = eliquid.toFixed(2)+'$ /mois de e-liquides'; 
	document.getElementById('kit_month').innerHTML = kit_mois.toFixed(2)+'$ /mois'; 
	document.getElementById('kit_year').innerHTML = kit_annee.toFixed(2)+'$ /année'; 
	document.getElementById('save').innerHTML = econo.toFixed(2)+'$ /année'; 
 
}

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
</script>
 
<body>
	<div id="titre">Calcul des &eacute;conomies !</div><br/><br/>
	<form name="form1" id="form1">
		<table width="1200" border="0">
			<tr>
				<td>
					<div id="titre">Cigarettes</div><br/><br/>
					Combien fumez-vous de cigarettes par jour ?<br/>
					<input type="text" id="smoked" value="" />
					<br/><br/>
 
					Combien co&ucirc;te un paquet de cigarettes ?<br/>
					<input type="text" id="pack" value="" /><br/><br/>
					Combien d&eacute;pensez-vous en produits (par ann&eacute;e) reli&eacute; indirectement &agrave; la cigarette comme:<br/>
					Nettoyage de dents, produits pour l'hal&ecirc;ne, briquets, gommes, etc... ?<br/>
					<input type="text" id="misc" value="" />
				</td>
				<td>
					<div id="titre">E-Cigarettes</div><br/><br/>
					Combien co&ucirc;te le kit de d&eacute;part que vous avez choisi?<br/>
					<select id="starter_kit">
						<option value=30>30$</option>
							<option value=40>40$</option>
							<option value=50 selected>50$</option>
							<option value=60>60$</option>
							<option value=70>70$</option>
							<option value=80>80$</option>
						</select></p>
				</td>
			</tr>
		</table>        
	</form>
	<br>
	<hr size="3" noshade> 
	<div id="titre">Maintenant, calculez vos &eacute;conomie !</div><br/>
	<div id="titre"><input type="button" value="Calculez" onclick="javascript:cal();"> </div>
	<hr size="3" noshade> 
 
 
<br>
	Vous allez d&eacute;penser par ann&eacute;e, <br>
        <div id="cig_annuel"></div><br><br><br>
 
        Avec votre nouvel ensemble de e-cig, br&ucirc;leur, liquides, &ccedil;a va vous coutez par mois<br>
        <div id="liquid_month"></div>
        <div id="kit_month"></div><br><br><br>
 
        Co&ucirc;t ANNUEL pour votre ensemble de e-cig <br>
        <div id="kit_year"></div><br><br><br>
 
        <hr size="5" noshade> 
        Une &Eacute;CONOMIE ANNUELLE de
       <div id="save" style="color:red;"></div><br><br><br>
</body>
</html>

Si vous regardez vers la fin où je fais afficher LIQUID_MONTH. De cette façon, les calculs s'affiche et c'est bien sauf que je voudrais
enlevé KIT_MONTH et mettre plutôt BRUL_MOIS et à toute les fois que j'enlève la ligne avec LIQUID_MONTH, les calculs n'apparaisse plus !!!!
Bizarre pour moi mais facile pour vous…

Merci

**lysandro** · 31/12/2014, 16h42

Envoyé par The_TooNZ

Si vous regardez vers la fin où je fais afficher LIQUID_MONTH. De cette façon, les calculs s'affiche et c'est bien sauf que je voudrais
enlevé KIT_MONTH et mettre plutôt BRUL_MOIS et à toute les fois que j'enlève la ligne avec LIQUID_MONTH, les calculs n'apparaisse plus !!!!

Je ne comprends pas grand chose à ton problème, mais c'est les fêtes ...

Si tu supprimes un élément de ta page html, mais que du coté javascript tu continues d'y accéder forcémment ça va coincer. Entend par là qu'il va y avoir une erreur qui arrêtera le script et tu n'auras pas tes résultats.

Autrement dit si tu supprimes

Code html :

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

<div id="liquid_month"></div>

mais que tu laisses

Code javascript :

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

document.getElementById('liquid_month').innerHTML = eliquid.toFixed(2)+'$ /mois de e-liquides';

ton calcul va s'arrêter sur cette instruction avec une erreur dans la console.

Donc
- Soit tu supprimes aussi la ligne de code,
- Soit tu testes si l'objet auquel tu veux accèder existe avant de le manipuler

Code javascript :

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

1
2
3
4
5
6
 
var elem;
...
if ( (elem = document.getElementById('liquid_month')) != null ) {
    elem.innerHTML = eliquid.toFixed(2)+'$ /mois de e-liquides';
}

par exemple

**The_TooNZ** · 31/12/2014, 19h51

Logique et c'est ok en enlevant les 2 LIQUID_MONTH mais si je remplace KIT_MONTH par BRUL_MOIS
là y'a plus rien qui s'affiche encore.

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
	var smoked=document.getElementById('smoked').value;
	var pack=document.getElementById('pack').value;
	var misc=document.getElementById('misc').value;
	var starter_kit=document.getElementById('starter_kit').value;
 
	var resultat=(smoked/20)*pack*365+misc/1;
	var eliquid=(smoked*0.0420)*365/12;
	var kit_mois=(starter_kit/365)*12;
	var brul_mois=7.18*12;
        var kit_annee=(7,18+eliquid+kit_mois)*12;
        var econo=resultat-kit_annee;
 
	document.getElementById('cig_annuel').innerHTML = resultat.toFixed(2)+'$ de cigarettes'; 
	document.getElementById('liquid_month').innerHTML = eliquid.toFixed(2)+'$ /mois de e-liquides'; 
	document.getElementById('kit_month').innerHTML = kit_mois.toFixed(2)+'$ /mois'; 
	document.getElementById('kit_year').innerHTML = kit_annee.toFixed(2)+'$ /année'; 
	document.getElementById('save').innerHTML = econo.toFixed(2)+'$ /année'; 
 
}

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
</script>
 
<body>
	<div id="titre">Calcul des &eacute;conomies !</div><br/><br/>
	<form name="form1" id="form1">
		<table width="1200" border="0">
			<tr>
				<td>
					<div id="titre">Cigarettes</div><br/><br/>
					Combien fumez-vous de cigarettes par jour ?<br/>
					<input type="text" id="smoked" value="" />
					<br/><br/>
 
					Combien co&ucirc;te un paquet de cigarettes ?<br/>
					<input type="text" id="pack" value="" /><br/><br/>
					Combien d&eacute;pensez-vous en produits (par ann&eacute;e) reli&eacute; indirectement &agrave; la cigarette comme:<br/>
					Nettoyage de dents, produits pour l'hal&ecirc;ne, briquets, gommes, etc... ?<br/>
					<input type="text" id="misc" value="" />
				</td>
				<td>
					<div id="titre">E-Cigarettes</div><br/><br/>
					Combien co&ucirc;te le kit de d&eacute;part que vous avez choisi?<br/>
					<select id="starter_kit">
						<option value=30>30$</option>
							<option value=40>40$</option>
							<option value=50 selected>50$</option>
							<option value=60>60$</option>
							<option value=70>70$</option>
							<option value=80>80$</option>
						</select></p>
				</td>
			</tr>
		</table>        
	</form>
	<br>
	<hr size="3" noshade> 
	<div id="titre">Maintenant, calculez vos &eacute;conomie !</div><br/>
	<div id="titre"><input type="button" value="Calculez" onclick="javascript:cal();"> </div>
	<hr size="3" noshade> 
 
 
<br>
	Vous allez d&eacute;penser par ann&eacute;e, <br>
        <div id="cig_annuel"></div><br><br><br>
 
        Avec votre nouvel ensemble de e-cig, br&ucirc;leur, liquides, &ccedil;a va vous coutez par mois<br>
        <div id="liquid_month"></div>
        <div id="brul_mois"></div><br><br><br>

**The_TooNZ** · 31/12/2014, 20h29

En fait c'est que je comprend pas trop comment fonctionne le système de variables en javascript et en html.
Le client a trois entrées à faire et moi je dois effectuer des calculs avec les chiffres qu'il a entrée et
lui montrer les économies qu'il fera durant l'année.

Si quelqu'un a une autre façon plus facile d'effectué cette tâche, laissez-le moi savoir, je changerai ma façon alors

**lysandro** · 01/01/2015, 13h00

Les variables en Javascript fonctionnent à peu près comme dans n'importe quel langage de programmation. Le HTML n'est pas un langage de programmation, mais un langage de description de page. A ce titre, il ne possède pas de variables. Pour faire simple (?), le javascript représente la logique, le html la présentation.

Ce qui est valable pour 'liquid_month' l'est aussi pour 'kit_month', si tu le supprimes d'un coté, il faut le supprimer de l'autre ou a minima le tester.

Et tu as un petite erreur de saisie là : var kit_annee=(7,18+eliquid+kit_mois)*12;, il faut remplacer par 7.18, le code fonctionne mais le calcul est faux.

Dans le html : <input type="button" value="Calculez" onclick="javascript:cal();">, l'attribut 'onclick' se réécrit :onclick="cal();". Cet attribut n'attend pas une URL mais un script donc pas la peine de préfixer avec 'javascript:'.

Maintenant, ton code manque de tests : controle de validité de la saisie, controle lors de l'accés aux controles de formulaire

Et la console (F12?) est ton amie

**The_TooNZ** · 01/01/2015, 14h47

Merci lysandro !

Mais c'est quoi la console (F12) ? Pour l'instant, c'est plutôt vous qui me CONSOLE !! haha

**The_TooNZ** · 01/01/2015, 17h48

Dans la partie de déclaration de variable (javascript), est-ce que tout est ok selon vous car j'ai aucun calcul qui s'affiche ???
Cristi, c'est la 1ère fois que j'ai autant de misère...

Code :

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

1
2
3
4
5
6
7
8
9
10
function calcul(f) {
	var cig_fumee=parseInt(365*parseFloat(f.cig_jour_value));
        var prix_annuel_cig=parseInt(cig_fumee*parseFloat(f.prix_paquet.value)/parseFloat(f.cig_par_paquet.value));
        var prix_annuel_ecig=parseInt(f.prix_kit.value)+(parseInt(f.prix_mois.value)*12);
 
	document.getElementById('prix_annuel_cig').innerHTML = prix_annuel_cig; 
	document.getElementById('prix_annuel_ecig').innerHTML = prix_annuel_ecig; 
	document.getElementById('cig_fumee').innerHTML = cig_fumee; 
 
}

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
<body>
	<form name="form" onsubmit="calcul(form);return false;">
		<table width="96%" style="width:100%">
			<tr>
			     <td style="width:45%;vertical-align:top;text-align:right;">
					<div id="titre">Cigarettes</div><br/><br/>
					<p>Combien fumez-vous de cigarettes par jour ?
					    <input type="text" id="cig_jour" value="" />
                                        </p>
 
 
					<p>Combien co&ucirc;te un paquet de cigarettes ?
					    <input type="text" id="prix_paquet" value="" />
                                        </p>
					<p>Nbre de cigarettes par paquet : 
                                 	    <select name="cig_par_paquet" style="width:auto;height:auto;">
                                    	        <option value=20>20</option>
                                                <option value=25 selected>25</option>
                                            </select>
                                        </p>
				</td>
				<td style="width:45%;vertical-align:top;text-align:right;">
					<div id="titre">E-Cigarettes</div><br/><br/><br/>
					Combien co&ucirc;te le kit de d&eacute;part que vous avez choisi?
					<select id="prix_kit">
						<option value=30>30$</option>
						<option value=40>40$</option>
						<option value=50 selected>50$</option>
						<option value=60>60$</option>
						<option value=70>70$</option>
						<option value=80>80$</option>
					</select></p>
				</td>
				<td></td>
			</tr>
			<tr>
				<td colspan="3" bgcolor="lightgray" style="width:10%;text-align:center;">
 
                                	<h1>Maintenant, calculez vos &eacute;conomie !<br/>
                                	<input type="button" value="Calculez" onclick="calcul(form);"></h1>
				</td>
			</tr>
		</table>					
	<br/>
	<br/>
		<table width="96%" style="width:100%">
			<tr>
			     <td style="width:45%;vertical-align:top;text-align:right;">
				 Vous allez d&eacute;penser par ann&eacute;e, <br/>
				 <span id="prix_annuel_cig"></span><br/><br/><br/>
			     </td>
 
			     <td style="width:45%;vertical-align:top;text-align:right;">
				Avec votre nouvel ensemble de e-cig, br&ucirc;leur, liquides, &ccedil;a va vous coutez par mois<br/>
				<span id="liquid_month"></span>
				<span id="brul_month"></span><br/><br/><br/>
 
				Co&ucirc;t ANNUEL pour votre ensemble de e-cig <br/>
				<span id="kit_year"></span><br/><br/><br/>
			</td>
			<td >&nbsp;
			</td>
		</tr>
		<tr>
   	    <td colspan="3" style="width:10%;text-align:center;">			
	       <hr size="5" noshade> 
               <hr size="10" noshade><h2>Une &Eacute;CONOMIE ANNUELLE de
               <span id="save" style="color:red;"></span>$<h2/>
            </td>
	</table>        
	</form>	
</body>
</html>

**lysandro** · 01/01/2015, 18h57

var prix_annuel_ecig=parseInt(f.prix_kit.value)+(parseInt(f.prix_mois.value)*12);.
Aucun contrôle de formulaire (input ou select ou ...) défini avec ce nom : 'prix_mois'. Ca plante. Pas de calcul.

console ? ==> moteur de recherche : +ton navigateur +console

**The_TooNZ** · 01/01/2015, 19h25

Ok, J'ai modifié le code pour le PRIX_MOIS et là ça indique 1 chiffre sur 2.
Pour le calcul des cigarettes conventionnelles, ça indique "NaN" aulieu d'un chiffre.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="style_div.css">
 
<style>
   div#titre {color: black;text-align: center; font-size: 30px;}
</style>
 
<script language="JavaScript" type="text/javascript">

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function calcul(f) {
	var cig_fumee=parseInt(365*parseFloat(f.cig_jour_value));
        var prix_annuel_cig=parseInt(cig_fumee*parseFloat(f.prix_paquet.value)/parseFloat(f.cig_par_paquet.value));
        var prix_annuel_ecig=parseInt(f.prix_kit.value)+(parseInt(f.prix_mois.value)*12);
 
	document.getElementById('prix_annuel_cig').innerHTML = prix_annuel_cig; 
	document.getElementById('prix_annuel_ecig').innerHTML = prix_annuel_ecig; 
	document.getElementById('cig_fumee').innerHTML = cig_fumee; 
 
}

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
</script>
 
<body>
	<form name="form" onsubmit="calcul(form);return false;">
		<table width="96%" style="width:100%">
			<tr>
			     <td style="width:45%;vertical-align:top;text-align:right;">
					<div id="titre">Cigarettes</div><br/><br/>
					<p>Combien fumez-vous de cigarettes par jour ?
					    <input type="text" id="cig_jour" value="" />
                                        </p>
 
 
					<p>Combien co&ucirc;te un paquet de cigarettes ?
					    <input type="text" id="prix_paquet" value="" />
                                        </p>
					<p>Nbre de cigarettes par paquet : 
                                 	    <select name="cig_par_paquet" style="width:auto;height:auto;">
                                    	        <option value=20>20</option>
                                                <option value=25 selected>25</option>
                                            </select>
                                        </p>
				</td>
				<td style="width:45%;vertical-align:top;text-align:right;">
					<div id="titre">E-Cigarettes</div><br/><br/><br/>
					Combien co&ucirc;te le kit de d&eacute;part que vous avez choisi?
					<select id="prix_kit">
						<option value=30>30$</option>
						<option value=40>40$</option>
						<option value=50 selected>50$</option>
						<option value=60>60$</option>
						<option value=70>70$</option>
						<option value=80>80$</option>
					</select>
					Co&ut mensuel pour les coils?
					<select id="prix_mois">
						<option value=8 selectecd>8$ </option>
						<option value=10>10$</option>
						<option value=15>15$</option>
					</select></p>
				</td>
				<td></td>
			</tr>
			<tr>
				<td colspan="3" bgcolor="lightgray" style="width:10%;text-align:center;">
 
                                	<h1>Maintenant, calculez vos &eacute;conomie !<br/>
                                	<input type="button" value="Calculez" onclick="calcul(form);"></h1>
				</td>
			</tr>
		</table>					
	<br/>
	<br/>
		<table width="96%" style="width:100%">
			<tr>
			     <td style="width:45%;vertical-align:top;text-align:right;">
				 <br/><br/><br/><br/><br/>
                                 Co&ucirc;t ANNUEL de cigarrettes <br/>
				 <span id="prix_annuel_cig"></span>
			     </td>
 
			     <td style="width:45%;vertical-align:top;text-align:right;">
				Avec votre nouvel ensemble de e-cig, br&ucirc;leur, liquides,<br/> &ccedil;a va vous coutez par mois<br/>
				<span id="prix_mois"></span><br/><br/><br/>
 
				Co&ucirc;t ANNUEL de e-cigarrettes <br/>
				<span id="prix_annuel_ecig"></span><br/><br/><br/>
			</td>
			<td >&nbsp;
			</td>
		</tr>
		<tr>
   	    <td colspan="3" style="width:10%;text-align:center;">			
	       <hr size="5" noshade> 
               <hr size="10" noshade><h2>Une &Eacute;CONOMIE ANNUELLE de
               <span id="save" style="color:red;"></span>$<h2/>
            </td>
	</table>        
	</form>	
</body>
</html>

**The_TooNZ** · 01/01/2015, 22h12

Le problème que j'ai c'est que je comprend pas trop le document.getElementById.
Pour le VAR, j'ai déjà fait de la programmation jadis (1984-2000) mais c'est loin un peu.
Eille, juste pour dire, j'ai déjà fait du langage C… haha

Donc faites juste m'expliquer comment fonctionne ce foutu document.getElementById et je devrais être ok pour me
débrouiller par la suite.

J'ai cru comprendre que si j'ai un document.getElementById, alors il faut utiliser à tout prix la variable qu'il y a dedans.
En plus, dans les bouts de codes que j'ai trouvé, il y a des parseInt et parseFloat et avant j'utilisais des toFixed(2) donc
c'est super mêlé dans ma vieille tête.

Merci de m'éclairer

**lysandro** · 01/01/2015, 23h37

Javascript ou Ecmascript pour la normalisation, c'est le langage de prog. HTML c'est le langage de desc. de page, les balises <html> etc. pour accèder aux éléments de la page (le html), Javascript a besoin d'une api. Cette api, c'est le DOM (Document Object Model). Elle fournit une représentation arborescente de la page html accessible en Javascript. Dans cette api, différents objets sont définis, avec leurs attributs et leurs méthodes. Dans ces objets, il y a 'document' qui représente toute la page html (balises <html> comprises). La méthode 'getElementById' de 'document' permet un accès direct aux différentes balises dans la page, du moment qu'elles possèdent un attribut 'id' correspondant.

Code html :

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

<div id="div1">...</div>

Code javascript :

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

var mondiv = document.getElementById("div1");

On utilise 'document.getElementById' pour récupérer une représentation manipulable (un objet) en javascript de l'élément html, 'div' dans l'exemple. Cet objet à des attributs, 'id' par exemple, des méthodes, des événements. Par exemple, le contenu html du 'div' est maintenant accessible avec 'mondiv.innerHTML'.

'mondiv' est une variable javascript contenant un objet HtmlDivElement du DOM qui est une représentation de la balise 'div' de la page html.

Dans tes calculs, tu accèdes à des controles de formulaire au travers de leur attribut 'value'. Cet attribut est une chaine de caractères, les parseInt parseFloat servent à la transformer en nombre. De plus, dans ton cas, on peut saisir ce qu'on veut, c'est à dire autre chose que des chiffres. Quand, en javascript, une valeur ne peut être convertie en nombre, la valeur renvoyée est NaN (Not A Number).

Pour comprendre une chaine de caractère en nombre, tu peux utiliser 'parseInt(chaine)' ou 'parseFloat(chaine)', mais si une de ces méthodes ne peut faire la conversion elle renverra 'NaN'. ~~Tu peux aussi utiliser 'Number(chaine)', la différence avec les premières, c'est qu'elle renvoie 0 si elle ne peut pas convertir~~.

Bref, il faudrait lire les valeurs de tes controles, tester si ce sont des valeurs utilisables dans tes calculs

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var e = document.getElementById("...");
if ( e == null ) {
  alert("pas d'élément avec un id : ...");
  return;
}
var v = e.value;
var n = parseInt(v);
if ( isNaN(n) ) {
  alert("pas un nombre");
  return;
}

dans l'idéal, mettre la zone de saisie en avant, avec un bordure ou un fond rouge ou n'importe quoi d'autre, avoir un message clair, de façon à ce que l'utilisateur puisse corriger sa saisie.

'.toFixed(2)' sert à avoir deux décimales après la virgule. C'est une méthode qui ne s'applique qu'aux nombres.

Mais il me semble qu'il y a une ~~fac~~ faq javascript pas trés loin, et même des tutoriaux, ce serait peut-être pas mal d'y jeter un oeil

**The_TooNZ** · 02/01/2015, 14h19

Merci encore… Je comprend un peu mieux.
Mais revenir au NaN, c'est pourtant des chiffres que j'entre et non des caractères donc pourquoi il ne les calculs pas.

J'ay essayer de mettre plusieurs <span> avec les nom de variables mais il m'arrivent toujours ERROR.
Faut dire que je teste mon code avec le site TryIt http://www.w3schools.com/jsref/tryit...yjsref_tofixed

Je reste quand même perplexe car je comprend pas qu'il écrive un NaN.

Pour la fac (je crois qu'écrit comme ça, ça veux dire Foire aux Cons… haha), je vais aller voir

**The_TooNZ** · 02/01/2015, 14h28

Sinon, toi, tu aurais fait ça comment pour mon bout de code qui marche pas car je suis allé sur plusieurs site et j'ai regardé le code qu'ils utilisent et j'essais avec mes variables.
C'est p-e pour ça que ça peut te sembler bizarre.

Je te montre l'adresse du site où je veux mettre ces calculs, ça pourrais t'aider à comprendre ce que j'essais. http://www.nicovap.ca/#!CALCULATRICE/cr6n

Merci encore

**lysandro** · 02/01/2015, 16h48

Désolé pour fac, simple erreur de saisie. Je vais le corriger.

Ok, J'ai modifié le code pour le PRIX_MOIS et là ça indique 1 chiffre sur 2

Je ne comprends pas la question.

NaN: dans
var cig_fumee=parseInt(365*parseFloat(f.cig_jour_value)); ;
'f.cig_jour_value' n'existe pas, a donc pour valeur 'undefined', 'parseFloat(undefined)' a pour valeur 'NaN', '365*NaN' a pour valeur 'NaN'. Et le 'parseInt' ne sert à rien.

Remplacer par
var cig_fumee=365*parseFloat(f.cig_jour.value); .

Remarques :

Dans ta page html, tu as défini plusieurs éléments avec le même attribut 'id' :
- deux 'title' : <div id="title"> ;
- deux 'prix_mois' : <select id="prix_mois"> et <span id="prix_mois"> .
C'est interdit par la spec, et ce n'est pas une bonne idée surtout avec la notation que tu utilises 'f.prix_mois' :
Comment sais tu lequel tu récupères ?

**The_TooNZ** · 02/01/2015, 17h15

Cool… c'est juste un _value que j'ai changé pour un .value
et il en manquait un aussi à f.prix_kit

Pour l'affichage tout est ok, il me reste à travailler mes formules de calculs pour que ça affiche les bon chiffres.

Merci

**The_TooNZ** · 02/01/2015, 17h32

Bon voici le code fonctionnel, à date.
L'autre chose que je comprend pas.
Je veux juste ajouté une variable dans VAR, je fais un copié/collé de la première, mettons, et j'ajoute un <span> plus bas pour la faire affiché et
ça m'indique une error.
Bordel, je fais rien de mal me semble. Je voulais ajouté: var cig_by_day=parseFloat(f.cig_jour.value); et j'ai même essayé var cig_by_day=f.cig_jour.value; et ça marche pas.

Code html :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="style_div.css">
 
 
<script language="JavaScript" type="text/javascript">

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function calcul(f) {
	var cig_fumee=parseInt(365*parseFloat(f.cig_jour.value));
        var prix_annuel_cig=parseInt(cig_fumee*parseFloat(f.prix_paquet.value)/parseFloat(f.cig_par_paquet.value));
        var prix_annuel_ecig=parseInt(f.prix_kit.value)+(parseInt(7.18)*12);
        var eliquide=parseInt(7.18+parseInt(f.prix_kit.value))+parseInt(cig_fumee*0.04*365)/12;
        var econo=parseInt(prix_annuel_cig-prix_annuel_ecig);
 
 
	document.getElementById('eliquide').innerHTML = eliquide; 
	document.getElementById('prix_annuel_cig').innerHTML = prix_annuel_cig; 
	document.getElementById('prix_annuel_ecig').innerHTML = prix_annuel_ecig; 
	document.getElementById('cig_fumee').innerHTML = cig_fumee; 
 
}

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
</script>
 
<body>
	<form name="form" onsubmit="calcul(form);return false;">
		<table width="96%" style="width:100%">
			<tr>
			     <td style="width:45%;vertical-align:top;text-align:right;">
					<h1 align="center">Cigarettes</h1><br/><br/>
					<p>Combien fumez-vous de cigarettes par jour ?
					    <input type="number" id="cig_jour" value="" />
                                        </p>
 
 
					<p>Combien co&ucirc;te un paquet de cigarettes ?
					    <input type="number" id="prix_paquet" value="" />
                                        </p>
					<p>Nbre de cigarettes par paquet : 
                                 	    <select name="cig_par_paquet" style="width:auto;height:auto;">
                                    	        <option value=20>20</option>
                                                <option value=25 selected>25</option>
                                            </select>
                                        </p>
				</td>
				<td style="width:45%;vertical-align:top;text-align:right;">
					<h1 align="center">E-Cigarettes</h1><br/><br/><br/>
					Combien co&ucirc;te le kit de d&eacute;part que vous avez choisi?
					<select id="prix_kit">
						<option value=30>30$</option>
						<option value=40>40$</option>
						<option value=50 selected>50$</option>
						<option value=60>60$</option>
						<option value=70>70$</option>
						<option value=80>80$</option>
					</select>
				</td>
				<td></td>
			</tr>
			<tr>
				<td colspan="3" bgcolor="lightgray" style="width:10%;text-align:center;">
 
                                	<h1>Maintenant, calculez vos &eacute;conomie !<br/>
                                	<input type="button" value="Calculez" onclick="calcul(form);"></h1>
				</td>
			</tr>
		</table>					
	<br/>
	<br/>
 
 
		<table width="96%" style="width:100%">
			<tr>
			     <td style="width:45%;vertical-align:top;text-align:right;">
				 <br/><br/><br/>                                 
                                 Nombre de cigarettes fum&eacute;es durant l'ann&eacute;e:<br/>
				 <span id="cig_fumee"></span> <br/>
                                 Co&ucirc;t ANNUEL de cigarrettes <br/>
				 <span id="prix_annuel_cig"></span>
			     </td>
 
			     <td style="width:45%;vertical-align:top;text-align:right;">
				Avec votre nouvel ensemble de e-cig, br&ucirc;leur, liquides,<br/> &ccedil;a va vous coutez en moyenne par mois<br/>
				<span id="eliquide"></span><br/>
 
				Co&ucirc;t ANNUEL de e-cigarrettes <br/>
				<span id="prix_annuel_ecig"></span><br/><br/><br/>
			</td>
			<td >&nbsp;
			</td>
		</tr>
		<tr>
   	            <td colspan="3" style="width:10%;text-align:center;">			
	                <hr size="5" noshade> 
                        <h2>Une &Eacute;CONOMIE ANNUELLE de
                        <span id="econo" style="color:red;"></span>$<h2/>
                    </td>
                </tr>
  	   </table>        
	</form>	
</body>
</html>

**The_TooNZ** · 02/01/2015, 17h59

Et pourquoi y'a plein de parseInt et parseFloat ? Y'a pas moyen de juste lui dire que je veux un chiffre avec 2 décimales ??

**The_TooNZ** · 02/01/2015, 18h01

Je viens d'essayer ceci:

Code :

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

1
2
var eliquide=(f.cig_jour.value*0.04*365)/12;
eliquide.toFixed(2);

Et ça marche pas pareil, la réponse est 12.166666666666666

Problème de variables cette fois.

JavaScript

Discussions similaires

Partager

Partager