Discussion :

[will74]

Bonjour à tous.

Je rencontre actuellement une difficulté en Javascript, en rapport avec un petit script que je suis en train de développer.
Il s'avère que je souhaite englober plusieurs éléments via un

Code :

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

var maVar = document.getElementsByName('case');

et déclarer un nouvel évènement de type onClick sur ma variable maVar

En effet, j'ai un certains nombres de divs incluses dans ma page portant l'attribut name="case", et je souhaiterais que lorsque l'utilisateur clique sur l'une d'elle, l'évènement fasse appel à la fonction getAttribute, afin de récupérer l'id de la div cliqué (pour chacune de mes divs l'id est différent : case1, case2, ... caseN), puis d'extraire le contenu html de cette dernière... (il s'agit d'un chiffre, ou de ' ' signifiant que la case est vide).

Voilà, j'espère que vous avez saisi mon problème.
Je me suis assuré que la déclaration de l'évènement soit bien après la déclaration de mes divs en javascript, de façon à ce quelles soient reconnus dans le DOM, mais après plusieurs tests cela n'est toujours pas fonctionnel.

Pour résumer, je souhaite englober plusieurs DIV dans un seul évènement(onClick), via leur nom (qui est le même pour toutes), puis récupérer l'id de la case précisément cliqué, et via cet id, extraire le contenu Html de la div...
Après tout cela je pense pouvoir me débrouiller.

Merci d'avance pour vos aides précieuses.

Bonne continuation et joyeuses fêtes de fin d'année.

wILL

PS : voici des extraits de mon code, qui j'éspère pourront vous aider à comprendre

Ecriture de mes divs dans la page :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
			function setGrille() {
				var grille = document.getElementById('grille');
				var contentCase = "";
				for ( var i = 0; i < 25; i++)
				{
					if (valueTab[i] == undefined)
						contentCase = "&nbsp;";
					else
						contentCase = valueTab[i];
 
					grille.innerHTML += "<div name=\"gCase\" id=\"case" + i + "\" class=\"case\">" + contentCase + "</div>";
				}
			}

Déclaration de mon évènement : Non-fonctionnel
(l'appel de la fonction se fait après l'écriture des divs dans la page)

Code :

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

1
2
3
4
5
6
			function eCaseClick() {
				var	casesGrille = document.getElementsByName('gCase');
				casesGrille.onclick = function() {
					alert("Test");
				}
			}

[will74]

Après quelques heures de recherches et de test, j'en suis venu à tester quelque chose de très "con".... et sa marche.

Voici le code si cela vous intéresse :

Code :

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

1
2
3
4
5
6
7
8
9
			function eCaseClick() {
				for (var i = 0; i < 25; i++) {
					var	casesGrille = document.getElementById('case'+i);
					casesGrille.onclick = function() {
						var atrName = this.innerHTML;
						alert(atrName);
					}
				}
			}

Je crée une boucle avec un nombre d'itération égal à mon nombre de divs traitées. A chaque passage j'associe à la variable casesGrille la référence de la case+i.
La fonction correspondante à l'évènement onclick de la variable est elle aussi déclarée.

Tout ceci exécuté après l'écriture dynamique de me divs, et le résultat est impec.

J'ai inclus une petite alert dans le seul but de tester mon code

Bonne continuation à tous

wILL

[kernelfailure]

Quand tu utilises une méthode getElements... avec un "s". En retour de fonction, soit c'est null, sois c'est un objet NodeList.
NodeList s'apparente à un Array (bien moindre) de Element.
cf. W3C DOM NodeList pour plus de précision sur les propriétés.


Quand tu utilises une méthode getElement... sans "s", soit c'est null soit c'est un Element, et un seul.

Donc, forcément, dans ton premier post, le onclick, tu le placais sur un NodeList, ce qui n'a aucun effet et ne sert à rien.