codage avec js

baka54 · 24/01/2011, 16h19

Bonjour, ou bonsoir,
Je me présente jérôme, je suis sur un projet d'un script en js,
permettant de faire des comparaisons d'une variable, exemple:

Si la valeur taper se trouve entre 0 et 50 affiche une image + le chiffre taper sur l'image.

Pour le moment j'ai mon script qui ne fait qu'afficher les 2 première image de mes 2 première comparaison et aussi de ma dernière,
mais pas ceux de 91 a 150 et les autre, sa doit venir de mes if, sa j'en suis sûr, mais bon je débute en js donc un peu difficile le début j'avoue,
j'aimerai juste avoir votre opinion sur mon script et aussi m'orienté sur mon erreur.

Mon script complet:

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
<HTML>
  <HEAD> <TITLE> </TITLE>
<script language="JavaScript">
function validation(f) {
  if (f.val.value >='0' && f.val.value <= '50') {
  first_image =new Image(477,437)
  first_image.src="images/1.jpg";
  document.write('<img src="'+first_image.src+'" border="0" alt="test">');
    return false;
    }
	if (f.val.value >='51' && f.val.value <= '90') {
alert ("de 51 a 90");
    return false;
    }
    if (f.val.value >='91' && f.val.value <= '150') {
alert ("de 91 a 150");
    return false;
    }
	if (f.val.value >='151' && f.val.value <= '230') {
alert ("de 151 a 230");
    return false;
    }
	if (f.val.value >='231' && f.val.value <= '330') {
alert ("de 231 a 330");
    return false;
    }
	if (f.val.value >='331' && f.val.value <= '450') {
alert ("de 331 a 450");
    return false;
    }
  if (f.val.value >'451') {
alert ("plus de 450");
    return false;
    }
  }
</script>
</HEAD>
  <BODY>
<form method="post" onsubmit="return validation(this)" >
valeur DPE:
<input name="val" type="text" value="">
<input type="submit" value="valider">
</form>
</body>
</html>

En vous remerciant et en espérant de l'aide merci.

mekal · 24/01/2011, 17h00

les chiffres vu qu'ils sont entre parenthese son reconu comme une chaine de carractere et pas comme des chiffres il ne peut donc pas y avoir de comparaison de chiffre

a mon avis la bonne syntaxe c'et celle ci

Code :

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

1
2
 
if (parseInt(f.val.value)>=51  && parseInt(f.val.value) <= 90)

Eric2a · 24/01/2011, 20h19

Salut,

Il est préferable de s'assurer que la donnée saisie correspond bien à un nombre.

Ensuite, au lieu de faire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if(v<=50){
	// Inferieur ou égale à 50
	return false;
}
 
// Ici, v est forcemment >= 51
 
if (v>=51 && v<=90) {
	// De 51 a 90 inclus
	return false;
}

Il est préférable d'utiliser else if

Code :

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

1
2
3
4
5
6
7
if(v<=50){
	// Inferieur ou égale à 50
}
else if(v<=90){
	// De 51 a 90 inclus
}
return false;

Ensuite, document.write()... On oublie.

Dans l'exemple de code ci-dessous, la fonction appendImage() est appelée avec les paramètres suivants :

Code :

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

1
2
3
4
5
6
value	La valeur saisie
url	L'adresse de l'image
width	La largeur de l'image
height	La hauteur de l'image
alt	Le texte alternatif

Sont rôle est d'ajouter, dans l'arbre DOM, deux paragraphes dans l'élément <div> nommé "image". Le premier paragraphe contient la valeur saisie. Le deuxième contient l'image.

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
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
82
83
84
85
86
87
88
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<meta name="description" content="Test" />
 
	<script type="text/javascript">//<![CDATA[
		function appendImage(value,url,width,height,alt){
			var elt=document.getElementById('image');
			if(url==''||!elt)return false;
 
			while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
 
			var p=document.createElement('p');
			p.appendChild(document.createTextNode(value+' DPE'));
			elt.appendChild(p);
 
			var img=document.createElement('img');
			img.src=url;
			if(width>0 && height>0){
				img.width=width;
				img.height=height;
			}
			if(alt!=='')img.alt=alt;
 
			p=document.createElement('p');
			p.appendChild(img);
			elt.appendChild(p);
			p=null;
			img=null;
			elt=null;
			return false;
		}
 
		function validation(f){
			var msg='';
			if(/^\s*\d+\s*$/.test(f.val.value)){
				var v=parseInt(f.val.value,10);
				if(v<1)msg='Le nombre doit être supérieur à zéro';
			}
			else{
				msg='Veuillez saisir un nombre supérieur à zéro';
			}			
			if(msg!==''){
				alert(msg);
				return false;
			}
 
			if(v<=50){
				appendImage(v,'img-000.jpg',240,180,'Texte alternatif');	// de 1 à 50
			}
			else if(v<=90){
				appendImage(v,'img-001.jpg',240,180,'Texte alternatif');	// de 51 à 90
			}
			else if(v<=150){
				appendImage(v,'img-002.jpg',240,180,'Texte alternatif');	// de 91 à 150
			}
			else if(v<=230){
				appendImage(v,'img-003.jpg',240,180,'Texte alternatif');	// de 151 à 230
			}
			else if(v<=330){
				appendImage(v,'img-004.jpg',240,180,'Texte alternatif');	// de 231 à 330
			}
			else if(v<=450){
				appendImage(v,'img-005.jpg',240,180,'Texte alternatif');	// de 331 à 450
			}
			else{
				appendImage(v,'img-006.jpg',240,180,'Texte alternatif');	// v >= 450
			}
			return false;
		}
		//]]>
	</script>
</head>
<body>
	<form action="" method="post" onsubmit="return validation(this);">
		<p>	Valeur dpe :
			<input name="val" type="text" value="">
			<input type="submit" value="valider">
		</p>
	</form>
 
	<div id="image">
		<!-- Image placée ici par le scipt -->
	</div>
</body>
</html>

Ca ne correspont pas forcement à tes attentes. Mais si cela peut te faire abandonner l'utilisation de document.write()...

baka54 · 26/01/2011, 21h16

je vais tester sa désoler de répondre que maintenant, et surtout merci de votre aide :$

baka54 · 26/01/2011, 21h29

j’avoue que la c'est beaucoup mieux j'avais réussi après a avoir quelque chose mais la c'est largement mieux :$ maintenant c'est intégrer la valeur sur l'image, je pense utilisé objet style mais j'ai cru comprendre que sa posait des soucis avec ie :s

mais bon là, cela m'a beaucoup aidé je t'en remercie

, je vais pas abusé non plus je vais essayer de trouvé une solution a l'insertion de ma valeur sur l'image.

Merci en tout cas pour l'aide.

26/01/2011, 21h16	#4
baka54 Invité de passage Inscription : janvier 2011 Messages : 5 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 5 Points : 1 Points : 1	merci :) je vais tester sa désoler de répondre que maintenant, et surtout merci de votre aide :$
	00

26/01/2011, 21h29	#5
baka54 Invité de passage Inscription : janvier 2011 Messages : 5 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 5 Points : 1 Points : 1	cela est beaucoup mieux en effet j’avoue que la c'est beaucoup mieux j'avais réussi après a avoir quelque chose mais la c'est largement mieux :$ maintenant c'est intégrer la valeur sur l'image, je pense utilisé objet style mais j'ai cru comprendre que sa posait des soucis avec ie :s mais bon là, cela m'a beaucoup aidé je t'en remercie , je vais pas abusé non plus je vais essayer de trouvé une solution a l'insertion de ma valeur sur l'image. Merci en tout cas pour l'aide.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email