click

Une liste d'éléments html

On a vu (relire la page de cours et celle d'exercices au besoin) comment agir dans la page (changement de couleur, apparition d'un élément html...) en réaction à un événement click.

Un inconvénient dans la technique présentée dans ces pages était de n'agir que sur un seul élément html. On aimerait maintenant agir sur une série d'éléments de même nature sans avoir à écrire un script pour chaque élément. Pour cela, il nous faudra disposer :

D'une "liste" ("NodeList") de ces éléments. Nous voyons ci-dessous comment obtenir une telle liste.
De la possibilité d'agir de façon analogue sur tous les éléments de la liste sans réécrire le code: on utilisera pour cela une boucle for.

La syntaxe de `for`

La syntaxe est la suivante: for(let i=valeurdepart; i<= valeurfin; i += pas).

A l'intérieur des parenthèses, on commence par déclarer la variable indice (nommée i ci-dessus, mais le choix de ce nom est bien sûr libre) et la première valeur prise let i=valeurdepart.
On donne ensuite une condition d'arrêt. Ici i<= valeurfin. On aurait pu utiliser < ou encore d'autres façons d'exprimer la condition d'arrêt.
Le code i += pas signifie que i avancera de la valeur pas. Il est équivalent au code i = i+pas. Ici i prendra les valeurs valeurdepart, valeurdepart+pas, valeurdepart+2*pas, valeurdepart+3*pas... tant que ces valeurs restent inférieures ou égales à valeurfin. On utilisera souvent i++ qui est équivalent à i = i+1 (c'est à dire encore à i += 1).

Un exemple

On utilise document.write() qui permet d'écrire directement du code html dans la page html.

<!DOCTYPE html>
<html lang="fr">
	
	
	
<head>
	<meta charset="utf-8">
	<title> for </title>
</head>
    




<body>


	 
	
	
	<script>
	for(let i = 2; i < 7; i++)
	{
		document.write("Valeur de i: " + i + ".<br>");
	}

	document.write("<hr>"); // hr : horizontal rule, trace un trait horizontal

	for(let j = 3; j <= 10; j += 2)
	{
		document.write("Valeur de j: " + j + ".<br>");
	}


	document.write("<hr>"); // hr : horizontal rule, trace un trait horizontal

	for(let k = 12; k > -7; k -= 3)
	{
		document.write("Valeur de k: " + k + ".<br>");
	}
	</script>
	 
</body>


</html>

`querySelectorAll`

Vous compléterez la lecture des exemples ci-dessous par la lecture de la page w3schools querySelectorAll et de la page w3schools NodeList.

Premier exemple

Dans l'exemple ci-dessous, on agit sur les éléments de classe A un par un et on agit d'un coup sur tous les éléments de classe B en utilisant une boucle for.

On notera que lorsqu'on a récupéré tous les éléments de classe B avec le code let paragraphesB = document.querySelectorAll(".B");, on dispose facilement du nombre d'éléments de classe B dans la page: c'est la longueur de la liste donnée par paragraphesB.length. Les éléments de la liste paragraphesB sont numérotés de 0 à paragraphesB.length-1: paragraphesB[0], paragraphesB[1], paragraphesB[2], ..., paragraphesB[paragraphesB.length-1].

<!DOCTYPE html>
<html lang="fr">
	
	
	
<head>
	<meta charset="utf-8">
	<title> querySelectorAll </title>
	<style>
		
		 
		
	</style>
</head>
    




<body>


	<p class="A"> Paragraphe 1 de classe A</p>
	<p class="B"> Paragraphe 1 de classe B</p>
	<p class="C"> Paragraphe 1 de classe C</p>
	<p class="A"> Paragraphe 2 de classe A</p>
	<p class="B"> Paragraphe 2 de classe B</p>
	<p class="A"> Paragraphe 3 de classe A</p>
	<p class="C"> Paragraphe 2 de classe C</p>
	<p class="B"> Paragraphe 3 de classe B</p>
	<p class="B"> Paragraphe 4 de classe B</p>
	
	
<script>

/* on affecte à la variable paragraphesA  
la "liste" des éléments de classe A : */
let paragraphesA = document.querySelectorAll(".A");


/* un clic sur le premier paragraphe de class A changera sa couleur de fond en bleu.
Attention, la numérotation commence à 0 : */
paragraphesA[0].addEventListener(	
	'click', 
	function(){ 
		paragraphesA[0].style.backgroundColor = 'blue' ;
	}
);



/* un clic sur le second paragraphe de class A changera sa couleur de fond en rouge : */
paragraphesA[1].addEventListener(	
	'click', 
	function(){ 
		paragraphesA[1].style.backgroundColor = 'red' ;
	}
);


/* un clic sur le 3ème paragraphe de class A changera sa couleur de fond en jaune : */
paragraphesA[2].addEventListener(	
	'click', 
	function(){  	 
		paragraphesA[2].style.backgroundColor = 'yellow' ;
	}
);



/* on affecte à la variable paragraphesB  
la "liste" des éléments de classe B : */
let paragraphesB = document.querySelectorAll(".B");


/* un clic dans le document changera la couleur de tous les paragraphes B.
Pour cela, on utilise une boucle for :  */
document.addEventListener(	
	'click', 
	function(){  
		for( let i=0; i <paragraphesB.length; i++)
		{
			paragraphesB[i].style.backgroundColor = "#aaaaaa";
		}
	}
);

</script>
	 
</body>


</html>

Second exemple

Dans cet exemple, on agit sur tous les paragraphes.

<!DOCTYPE html>
<html lang="fr">
	
	
	
<head>
	<meta charset="utf-8">
	<title> querySelectorAll </title>
</head>
    




<body>


	<p class="A"> Paragraphe 1 de classe A</p>
	<p class="B"> Paragraphe 1 de classe B</p>
	<p class="C"> Paragraphe 1 de classe C</p>
	<p class="A"> Paragraphe 2 de classe A</p>
	<p class="B"> Paragraphe 2 de classe B</p>
	<p class="A"> Paragraphe 3 de classe A</p>
	<p class="C"> Paragraphe 2 de classe C</p>
	<p class="B"> Paragraphe 3 de classe B</p>
	<p class="B"> Paragraphe 4 de classe B</p>
	
	
<script>

/* on affecte à la variable paragraphes   
la "liste" des éléments de type p : */
let paragraphes  = document.querySelectorAll("p");
 
 
document.addEventListener
(	
	'click', 
	function(){  
		for( let i=0; i <paragraphes.length; i++)
		{
			if( paragraphes[i].style.backgroundColor == 'orange' )
			{
				paragraphes[i].style.backgroundColor = 'magenta';
			}
			else
			{
				paragraphes[i].style.backgroundColor = 'orange';
			}
		}
	}
);

</script>
	 
</body>


</html>

Autres instructions js pour une liste d'éléments html

querySelectorAll permet de sélectionner la liste des éléments correspondant à un sélecteur css particulier.

Il existe également deux autres méthodes javascript plus spécifiques (dont vous n'aurez pas besoin, puisque querySelectorAll peut les remplacer):

`querySelector`

querySelector permet de sélectionner uniquement le premier élément d'une liste d'éléments correspondant à un sélecteur css particulier.

Vous pouvez lire la page w3schools querySelector(). Il est parfois utilisé en remplacement de getElementById().