click

L'événement click

On présente ci-dessous un exemple de modification du style css par un événement click sur un élément html. On a commenté le code pour vous aider à repérer les éléments de code javascript utilisés. Lisez bien ces commentaires et le code associé!

<!DOCTYPE html>
<html lang="fr">
	
	
	
<head>
	<meta charset="utf-8">
	<title> changement de couleur </title>
	<style>
		
		body{
			width: 300px;
			height:300px;
			border: 1px solid #aaa;
		}
		 
		#rouge{ 
			/* style pour afficher le paragraphe
			d'identifiant="rouge"
			sous forme
			d'un carré rouge */
			top : 20px;
			left: 20px;
			width: 50px;
			height: 50px;
			background-color: red;
			margin:0;}
		}
		
	</style>
</head>
    




<body>

	<p id="rouge"></p>

	<script>// les balises script délimitent le code js  
		
	/* on déclare une variable avec le mot clef let. 
	On nomme cette variable carre (on pourrait choisir un autre nom): */
	let carre;
	
	/* On initialise la variable carre: carre désignera l'élément html 
	d'identifiant="rouge" récupéré dans la page html grâce 
	au code document.getElementById( identifiant de l'élément ) : */
	carre = document.getElementById("rouge");


	/* on ajoute un événement  dans la page html :*/
	document.addEventListener(	
		'click', /* l'événement défini sera provoqué par un clic gauche de la souris */
		function(){ /* la fonction définit l'action provoquée par le clic */
		/* l'action définie ici consiste à modifier un élément de style css:
		on modifie la couleur de fond de l'élément html visé par la variable javascript nommée carre : */
			carre.style.backgroundColor = 'blue' ;
		}
	);
	</script>

	<p>Cliquez n'importe où dans la page (y compris en dehors de l'élément <code>body</code>).</p>
</body>


</html>

Une remarque sur le code css

En css, on définit une règle pour la couleur de fond d'un élément en utilisant background-color. En javascript, vous avez sûrement remarqué que cela est devenu backgroundColor. Ce changement est dû au fait que le javascript est un langage de programmation: le symbole - désigne un opérateur (soustraction) et ne peut donc pas être utilisé dans un nom de variable ou de fonction.

Pour les autres propriétés css à modifier, vous ferez une recherche sur le web pour savoir quel mot utiliser en js si les essais les plus "naturels" (à partir de vos connaissances css) échouent.

Une remarque sur le code js

Vous terminerez chaque ligne de code js par un point-virgule (ce n'est en fait pas strictement indispensable, mais c'est une bonne habitude à prendre pour éviter certains déboires plus tard).

Une modification

Dans le code précédent, l'événement est associé à la page: si vous cliquez n'importe où dans la page html, le carré rouge devient bleu.

Mais on peut aussi attacher l'événement à un élément html. Ci-dessous par exemple, on attache l'événement click à l'élément body: il faudra donc cliquer dans le body (délimité par une bordure grise) pour le changement de couleur (on a modifié document.addEventListener en document.body.addEventListener).

<!DOCTYPE html>
<html lang="fr">
	
	
	
<head>
	<meta charset="utf-8">
	<title> changement de couleur </title>
	<style>
		
		body{
			width: 300px;
			height:300px;
			border: 1px solid #aaa;
		}
		 
		#rouge{ 
			/* style pour afficher le paragraphe
			d'identifiant="rouge"
			sous forme
			d'un carré rouge */
			top : 20px;
			left: 20px;
			width: 50px;
			height: 50px;
			background-color: red;
			margin:0;}
		}
		
	</style>
</head>
    




<body>

	<p id="rouge"></p>

	<script>
	/* on déclare une variable avec le mot clef let. 
	On nomme cette variable carre (on pourrait choisir un autre nom): */
	let carre;
	
	/* On initialise la variable carre: carre désignera l'élément html 
	d'identifiant="rouge" récupéré dans la page html grâce 
	au code document.getElementById( identifiant de l'élément ) : */
	carre = document.getElementById("rouge");
	
	 


	/* on ajoute un événement  dans la page html :*/
	document.body.addEventListener(	
		'click', /* l'événement défini sera provoqué par un clic gauche de la souris */
		function(){ /* la fonction définit l'action provoquée par le clic */
		/* l'action définie ici consiste à modifier un élément de style css:
		on modifie la couleur de fond de l'élément html visé par la variable javascript nommée carre : */
			carre.style.backgroundColor = 'blue' ;
		}
	);
	</script>

	<p>Cliquez à l'intérieur de l'élément <code>body</code>.</p>
</body>


</html>

Une autre modification

On peut aussi limiter le déclenchement de l'événement à un clic sur le carré rouge (on a modifié document.addEventListener en carre.addEventListener).

<!DOCTYPE html>
<html lang="fr">
	
	
	
<head>
	<meta charset="utf-8">
	<title> changement de couleur </title>
	<style>
		
		body{
			width: 300px;
			height:300px;
			border: 1px solid #aaa;
		}
		 
		#rouge{ 
			/* style pour afficher le paragraphe
			d'identifiant="rouge"
			sous forme
			d'un carré rouge */
			top : 20px;
			left: 20px;
			width: 50px;
			height: 50px;
			background-color: red;
			margin:0;}
		}
		
	</style>
</head>
    




<body>

	<p id="rouge"></p>

	<script>
	/* on déclare une variable avec le mot clef let. 
	On nomme cette variable carre (on pourrait choisir un autre nom): */
	let carre;
	
	/* On initialise la variable carre: carre désignera l'élément html 
	d'identifiant="rouge" récupéré dans la page html grâce 
	au code document.getElementById( identifiant de l'élément ) : */
	carre = document.getElementById("rouge");
	
	 


	/* on ajoute un événement  dans la page html :*/
	carre.addEventListener(	
		'click', /* l'événement défini sera provoqué par un clic gauche de la souris */
		function(){ /* la fonction définit l'action provoquée par le clic */
		/* l'action définie ici consiste à modifier un élément de style css:
		on modifie la couleur de fond de l'élément html visé par la variable javascript nommée carre : */
			carre.style.backgroundColor = 'blue' ;
		}
	);
	</script>

	<p>Cliquez sur le carré rouge.</p>
</body>


</html>

if

JavaScript étant un langage de programmation, il permet bien sûr l'exécution conditionnelle : if(){}else{}.

Un exemple

Nous utilisons la structure if pour alterner deux couleurs pour notre carré lors de clics successifs.

<!DOCTYPE html>
<html lang="fr">
	
	
	
<head>
	<meta charset="utf-8">
	<title> changement de couleur </title>
	<style>
		
		body{
			width: 300px;
			height:300px;
			border: 1px solid #aaa;
		}
		 
		#rouge{ 
			/* style pour afficher le paragraphe
			d'identifiant="rouge"
			sous forme
			d'un carré rouge */
			top : 20px;
			left: 20px;
			width: 50px;
			height: 50px;
			background-color: red;
			margin:0;}
		}
		
	</style>
</head>
    




<body>

	<p id="rouge"></p>

	<script>
	 
	let carre = document.getElementById("rouge");
	 
	carre.addEventListener(	
		'click',  
		function(){ 
			if(carre.style.backgroundColor == 'blue')
			{
				carre.style.backgroundColor = 'yellow' ;
			}
			else
			{
				carre.style.backgroundColor = 'blue' ;
			}
		}
	);
	</script>

	<p>Cliquez sur le carré rouge.</p>
</body>


</html>

Une modification

Vous avez sûrement remarqué que le message "Cliquez sur le carré rouge" devenait inadapté après un clic (puisque que le carré n'est plus rouge!).

Pour arranger cela, on peut décider de changer également le message lors du clic sur le carré.

<!DOCTYPE html>
<html lang="fr">
	
	
	
<head>
	<meta charset="utf-8">
	<title> changement de couleur </title>
	<style>
		
		body{
			width: 300px;
			height:300px;
			border: 1px solid #aaa;
		}
		 
		#rouge{ 
			/* style pour afficher le paragraphe
			d'identifiant="rouge"
			sous forme
			d'un carré rouge */
			top : 20px;
			left: 20px;
			width: 50px;
			height: 50px;
			background-color: red;
			margin:0;}
		}
		
	</style>
</head>
    




<body>

	<p id="rouge"></p>
	<p id="message">Cliquez sur le carré rouge.</p>



	<script>
	let carre = document.getElementById("rouge");
	let message = document.getElementById("message");/* on a nommé la variable js de la même façon
	que l'identifiant de l'élément html, ce n'est pas une obligation mais c'est souvent plus facile 
	à lire ensuite. */
	 
	carre.addEventListener(	
		'click',  
		function(){ 
			if(carre.style.backgroundColor == 'blue')
			{
				carre.style.backgroundColor = 'yellow' ;
				message.textContent = "Cliquez sur le carré jaune.";
			}
			else
			{
				carre.style.backgroundColor = 'blue' ;
				message.textContent = "Cliquez sur le carré bleu.";
			}
		}
	);
	</script>

	
</body>


</html>