Interagir avec la page HTML

Lorsque du code JavaScript est intégré à une page, il s’exécute dès que la page est chargée. Or, pour créer de l’interactivité, il faudrait qu’il s’exécute uniquement lorsque les visiteurs effectuent certaines actions. Pour cela, nous pouvons écouter les événements qui se produisent sur les éléments HTML.

Il existe de nombreux événements, comme par exemple le clic, le survol de la souris, l’appui d’une touche du clavier, ou encore le redimensionnement de la fenêtre.

Écouter un événement

Essayons d’afficher un message lors du clic sur un bouton. Il s’agit d’un élément <button> en HTML, auquel on a donné un ID. Dans le code JavaScript, nous pouvons récupérer une référence à cet élément HTML à l’aide de la méthode document.getElementById.

<button id="super-bouton">Cliquez ici</button>

const myButton = document.getElementById("super-bouton")

Désormais, la variable myButton contient une référence à l’élément <button>. Nous pouvons lui ajouter un écouteur d’événement pour écouter le clic :

myButton.addEventListener("click", buttonClicked)

function buttonClicked() {
  console.log("Le bouton a été cliqué !")
}

addEventListener prend deux arguments : le nom de l’événement à écouter et la fonction à exécuter à chaque fois que l’événement se produit.

La fonction buttonClicked a été définie séparément, mais tu pourrais également l’écrire directement dans addEventListener. On appelle cela une fonction anonyme :

myButton.addEventListener("click", () => {
  console.log("Le bouton a été cliqué !")
})

un bouton qui affiche un console log “bouton cliqué”

“ajouter au panier” ou “add to cart” en anglais

Modifier la page HTML

<div id="message">Premier message.</div>

const message = document.getElementById("message")
message.innerHTML = "Nouveau message !"

Pour changer l’apparence d’un élément, tu peux directement utiliser l’attribut style et modifier les propriétés CSS :

const message = document.getElementById("message")
message.style.color = "red"
message.style.fontSize = "30px"

Une méthode plus élégante serait de préparer des règles CSS au préalable, et d’ajouter ou retirer ces classes avec JavaScript. Ainsi, tu peux réutiliser les mêmes classes à plusieurs endroits de ton site.

.error-message {
  color: red;
  font-size: 30px;
}

const message = document.getElementById("message")
message.classList.add("error-message")

Maintenant que tu sais modifier le contenu d’une page, essayons quelque chose de plus dynamique ! Dans l’exercice suivant, tu vas créer un compteur qui augmente à chaque fois que tu cliques sur le bouton. Tu devras déclarer la variable avec let pour pouvoir mettre à jour sa valeur.

Au cours de ce guide, tu as écouté l’événement click sur un bouton, mais il existe plein d’autres événements ! Par exemple, tu peux écouter l’événement mouseover pour savoir quand la souris passe au-dessus d’un élément, ou keydown pour savoir quand une touche du clavier est pressée.

Sélectionner des éléments avec querySelector

getElementById est simple à utiliser, mais il nécessite que tu ajoutes un id à chaque élément. Il existe une méthode plus flexible : querySelector, qui utilise la même syntaxe que les sélecteurs CSS :

//
const button = document.querySelector("#super-bouton")

const message = document.querySelector(".message")

const paragraph = document.querySelector("p")

querySelector renvoie le premier élément qui correspond au sélecteur, mais il pourrait y avoir plusieurs éléments correspondants sur la page. Pour tous les récupérer, utilise querySelectorAll, qui renvoie un tableau.

const messages = document.querySelectorAll(".message")
console.log("Contenu du 1er message : " + messages[0].innerHTML)
console.log("Nombre de messages : " + messages.length)