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

Problème de variables cette fois.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager