Déclencher un script sur un bouton - approche simple

Un bouton est souvent utilisé pour que l'utilisateur applique un choix ou une action.

Un bouton déclenche donc souvent l'éxécution d'un script Javascript pour traiter l'action de l'utilisateur.

Voici les étapes à suivre pour lier une fonction Javascript à un bouton.

1. Créer le fichier Javascript

Le code JavaScript doit être placé dans un fichier distinct du fichier HTML.

Dans le projet, créer un dossier nommé js ou script (ou autre chose de significatif), puis y ajouter un fichier JavaScript.

Cette organisation permet de séparer le code HTML du code JavaScript et de mieux organiser le projet.

2. Relier le fichier JavaScript au HTML

Dans le fichier HTML, ajouter la balise <script> juste avant la fermeture de la balise </body>.

exemple :

<script src="js/validerInformation.js"></script>

L'attribut src indique le chemin vers le fichier JavaScript.

3. Créer une fonction dans le fichier JavaScript

Pour pouvoir déclencher du code à partir d'un bouton, il faut d'abord créer une fonction dans le fichier script.js.

Une fonction est un bloc de code qui porte un nom et qui peut être exécuté lorsqu'on l'appelle.

Exemple dans js/script.js :

function afficherMessage() {
    alert("Bonjour et bienvenue !");
}

Ici, la fonction afficherMessage() affiche une boîte de dialogue contenant un message.

⚠ Attention : il est important de définir une fonction, car c'est cette fonction que nous allons appeler à partir du bouton HTML. Sans fonction, il n'y a pas de bloc nommé qu'on peut appeler.

4. Appeler la fonction à partir du bouton

Dans le fichier HTML, ajouter l'événement onclick au bouton.

<button type="button" onclick="afficherMessage()">
    Cliquez ici
</button>

L'événement onclick permet d'exécuter du code lorsqu'un utilisateur clique sur le bouton.

Dans notre exemple, le clic déclenche la fonction afficherMessage() définie dans le fichier JavaScript.