Recuperer les éléments d'une checkbox si checked

**eliottgiraudo** · 18/09/2013, 14h53

Bonjour,

Je ne comprends pas pourquoi j'ai l'erreur suivante =>

SCRIPT5007: La valeur de la propriété « afficherMessage » est null ou non définie, pas un objet Function
testJSChap2 - Copie.html, Ligne 45 Caractère 42

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function afficherMessage()
{
	var cases = document.getElementById("idForm").mesCases;
	var platsFavoris=new Array();
	for (var i=0; i<cases.length;i++)
		if (cases[i].checked)
			platsFavoris+=cases[i].value;
		for (var i=0;i<platsFavoris.length;i++)
			var lesPlats+= ((platsFavoris[i].value) +', ');
	return alert(lesPlats);
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<body>  <!-- corps du document -->
 
<form id="idForm">
Vous aimez : <br />
<input type="checkbox" name="mesCases" value="pizza" />la pizza <br />   
<input type="checkbox" name="mesCases" value="tartiflette" /> la tartiflette <br />
<input type="checkbox" name="mesCases" value="ratatouille" /> la ratatouille <br />   
<input type="button" value="Ok" onclick="afficherMessage()" /> 
</form>
 
</body>

**Bovino** · 18/09/2013, 15h12

Code :

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

platsFavoris+=cases[i].value;

Tu additionnes un tableau et une valeur textuelle ?

**eliottgiraudo** · 18/09/2013, 15h22

euh ^^ comment rajouter un élément dans un tableau à chaque tour de boucle ? Juste faire "=" ?
ou alors

Code :

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

platsFavoris.push(cases[i].value);

ça marche pas non plus (en tout cas il y a toujours la même erreur qu'indiqué dans mon premier message et rien d'indiqué pour cette ligne)

Merci pour ton aide

**Bovino** · 18/09/2013, 15h39

Code :

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

var lesPlats+= ((platsFavoris[i].value) +', ');

Un élément de tableau n'a pas de propriété value...

Code :

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

return alert(lesPlats);

C'est pas très orthodoxe ça...
alert() ne correspond pas à une valeur... donc ce que tu retournes ne correspond pas à grand chose.

**eliottgiraudo** · 18/09/2013, 16h01

Ok c'est pour ça que je propose :

Code :

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

platsFavoris.push(cases[i].value);

mais cela ne fonctionne pas.

Pour alert j'ai suivi des tuto ou on pouvait mettre du texte dans une variable x et retourner x dans la fonction.

Je suis un peu perdu là, je ne vois pas vers quoi aller ?

MERCI.

**NoSmoking** · 18/09/2013, 18h55

Bonjour,

mais cela ne fonctionne pas.

lourd à parier que tu n'as pas réaliser toutes les modifications dans ton code

Code :

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

1
2
3
4
5
6
7
var cases = document.getElementById("idForm").mesCases;
var platsFavoris= [];
for (var i=0; i<cases.length;i++){
    if (cases[i].checked){
        platsFavoris.push(cases[i].value);
    }
}

dans ce code tu transfères dans le tableau platsFavoris la valeur de la case si elle est cochée.

Maintenant je ne vois pas bien l'intérêt de la 2éme boucle for, si ce n'est transférer le tableau platsFavoris dans le tableau lesPlats.

**eliottgiraudo** · 19/09/2013, 09h18

Bonjour,

J'ai bien modifié le code ça ne fonctionnait pas, j'ai donc enlevé la boucle comme tu disais et j'ai essayé de mettre ds une variable à chaque tour de boucle la valeur des boutons cochés...
ça ne fonctionne tjrs pas...

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
function afficherMessage()
		{
			var cases = document.getElementById("idForm").mesCases;
			var platsFavoris=new Array();
 
			for (var i=0; i<cases.length;i++)
				if (cases[i].checked)
                                                   {
				platsFavoris.push(cases[i].value);
			             var lesPlats+=(cases[i].value) + "<br />" ;
}
 
 
 
			return alert(lesPlats);
 
		}

**Bovino** · 19/09/2013, 09h21

JavaScript n'est pas Python et il faut utiliser des accolades pour regrouper les instructions d'une structure (boucle, condition, etc.), la seule indentation ne suffit pas !

**eliottgiraudo** · 19/09/2013, 09h24

oui pardon c'est rectifié je m'en suis rendu compte juste apres mais ça ne fonctionne pas quand même.
Il ya a une erreur de logique dans le code ? Je comprends pas

(mains il me dis qu'il attend un point virgule sur la ligne ) =>

Code :

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

var lesPlats+=(cases[i].value) + "<br />" ;

Dans le html sur la ligne qui lance la fonction :

Code :

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

1
2
SCRIPT5007: La valeur de la propriété « afficherMessage » est null ou non définie, pas un objet Function 
testJSChap2 - Copie.html, Ligne 46 Caractère 42

**SylvainPV** · 19/09/2013, 14h18

Le navigateur te dit qu'il ne trouve pas la fonction afficherMessage. Autrement dit que le code de la fonction n'a pas été interprété au moment où tu veux l'utiliser. Il nous faudrait donc le reste du code pour savoir d'où vient le problème.

**Bovino** · 19/09/2013, 14h27

En même temps, dans le code que tu as modifié (message #7), ouvrir une accolade, c'est un bon début, mais il faut aussi la fermer...

**eliottgiraudo** · 20/09/2013, 14h51

Bonjour,

Voici le code entier corrigé qui ne fonctionne pas :

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
<!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>
 
		<title>Mes tests ! </title>
  		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  		<!-- en-tete du document -->
 
 
 
 
		<script type="text/javascript">
 
 
 
		function afficherMessage()
		{
			var cases = document.getElementById("idForm").mesCases;
			var platsFavoris=new Array();
 
			for (var i=0; i<cases.length;i++)
				if (cases[i].checked)
				{
					var lesPlats+=(cases[i].value) + "<br />" ;
				}
 
 
 
			return alert(lesPlats);
 
		}
 
		</script>	
 
 
	</head>
 
	<body>  <!-- corps du document -->
 
	<form id="idForm">
	Vous aimez : <br />
<input type="checkbox" name="mesCases" value="pizza" />la pizza <br />   
<input type="checkbox" name="mesCases" value="tartiflette" /> la tartiflette <br />
<input type="checkbox" name="mesCases" value="ratatouille" /> la ratatouille <br />   
<input type="button" value="Ok" onclick="afficherMessage()" /> 
</form>
 
	</body>
 
</html>

**Bovino** · 20/09/2013, 15h01

C'est sûr que si tu ne connais pas le B.A.BA, tu ne risques pas d'aller très loin...
Le mot clé var sert à définir une variable, si tu l'utilises dans une boucle, chaque itération va redéfinir la variable et écraser la précédente valeur...

**eliottgiraudo** · 20/09/2013, 15h05

Je suis les tutoriels de débutant, je trouve pas de niveau plus "bas".

Pourquoi m'avoir fait poirotter si vous saviez la réponse ?

Dans le 1er message ce code y est.

MERCI quand même.

**Bovino** · 20/09/2013, 15h10

Dans le 1er message ce code y est.

Ainsi que les nombreuses autres erreurs qu'on t'a indiquées précédemment...

**eliottgiraudo** · 20/09/2013, 15h20

Ok ok.
Maintenant il m'affiche "undefined" suivis des noms de cases cochés, suivis de <br>. Les balises ne sont pas traduites et en 1er il y a tout le temps undefined. ( Que j'écrive <br> ou <br /> cela ne change rien)

Mais pas d'erreurs de détecté

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
<!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>
 
		<title>Mes tests ! </title>
  		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  		<!-- en-tete du document -->
 
 
 
 
		<script type="text/javascript">
 
 
 
		function afficherMessage()
		{
			var cases = document.getElementById("idForm").mesCases;
			var lesPlats;
 
			for (var i=0; i<cases.length;i++)
				if (cases[i].checked)
					lesPlats+=cases[i].value + '<br>';
 
 
 
 
			return alert(lesPlats);
 
		}
 
		</script>	
 
 
	</head>
 
	<body>  <!-- corps du document -->
 
	<form id="idForm">
	Vous aimez : <br />
<input type="checkbox" name="mesCases" value="pizza" />la pizza <br />   
<input type="checkbox" name="mesCases" value="tartiflette" /> la tartiflette <br />
<input type="checkbox" name="mesCases" value="ratatouille" /> la ratatouille <br />   
<input type="button" value="Ok" onclick="afficherMessage()" /> 
</form>
 
	</body>
 
</html>

**SylvainPV** · 20/09/2013, 17h45

alert n'est pas prévu pour afficher du HTML, simplement afficher une phrase. C'est donc parfaitement normal s'il n'est pas interprété.
Quant à undefined, c'est la valeur initiale de ta variable, vu que tu ne lui en donnes pas. Attribue-là plutôt à une String vide au début.

Code :

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

var lesPlats ="";

**NoSmoking** · 20/09/2013, 18h35

Je suis les tutoriels de débutant,...

donc si tu es débutant il te faut prendre tout de suite de bonnes habitudes et notamment
- déclarer TOUTES tes variables en début de fonction avec le mot clé var.
- Initialiser toutes les variables qui feront l'objet d'un affectation/ajout du type +=, tu as là un exemple du plantage/arrachage de cheveux.
- utiliser SYSTEMATIQUEMENT les {instructions} dans les instructions if, for, while ou autre do.

il y en a bien d'autres, tu en découvriras certaines de toi même.

Pour en revenir à ton utilisation de return alert(lesPlats), même si cela t'affiche quelque chose, en retour de fonction tu auras undefined.

Code :

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

1
2
3
4
5
6
7
function fct(){
  var result = 'valeur retournée';
  return alert( result);
}
 
var test = fct();
alert( 'fct=' +test); // fct()=undefined

**eliottgiraudo** · 24/09/2013, 16h50

Pk il est vide ? je ne comprends pas désolé pour moi doit s'afficher la string contenue....

**NoSmoking** · 25/09/2013, 18h18

la méthode alert() affiche bien le texte passé en paramètre mais cette méthode retourne une valeur, comme toutes les fonctions, dans le cas d'alert la valeur retournée est undefined, comme toutes les fonctions qui ne retournent rien.
Dans certains langages de telles fonctions s’appellent des procédures.

Le fait de faire alert( result) fait que la fonction fct() retourne le résultat renvoyé par l'alert soit...undefined.

Si tu veux exploiter le résultat d'une fonction, ce qui est la moindre des choses il te faut retourné directement le résultat.

Code :

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

1
2
3
4
5
6
function fct(){
  var result = 'valeur retournée';
  return result;
} 
var test = fct();
alert( 'fct=' +test); // fct()=valeur retournée

Voilà pour faire simple...

Recuperer les éléments d'une checkbox si checked

JavaScript

Discussions similaires

Partager

Partager