Lors de la création de pages, il est parfois nécessaire que lorsque vous cliquez sur le bouton placé dans la page, un événement programmé par l'auteur se produise dans le navigateur. Pour ce faire, vous devez placer du code JavaScript dans le document généré et le lier au bouton requis. Selon la quantité de code requise pour implémenter l'événement prévu, vous pouvez utiliser différentes manières pour connecter le bouton au code.
Instructions
Étape 1
Le plus souvent, les appels de code JavaScript sont liés à l'événement onclick, c'est-à-dire au clic sur le bouton gauche de la souris. Si vous n'avez pas besoin de beaucoup de code pour décrire l'action qui doit se produire, alors tout cela peut être placé directement dans la balise button. Par exemple, pour programmer le navigateur pour qu'il affiche un message simple lorsqu'un bouton est cliqué, le script JavaScript ressemblerait à ceci: alert (« Le code a fonctionné ! ») Il suffit d'une seule instruction et d'un texte. Tout cela peut être facilement placé dans la description de l'événement onclick de la balise button. Dans ce cas, le code HTML le plus simple de la page pourrait ressembler à ceci:
Bouton avec code
Bouton avec code
Étape 2
Il n'est pas pratique de placer du code JavaScript plus complexe directement dans la balise button. Il est plus facile d'en faire une fonction distincte et de placer son appel dans l'événement onclick. Par exemple, cela peut ressembler à une fonction qui affiche une fenêtre contenant le temps d'un clic sur un bouton: function getTime () {
var maintenant = nouvelle date ();
alert ("Le code a fonctionné dans" + now.getHours () + ":" + now.getMinutes ());
} Il doit être placé dans l'en-tête de la page (entre les balises et). Le code complet de la page avec un appel à cette fonction liée au bouton peut ressembler à ceci:
Bouton d'appel de fonction
fonction getTime() {
var maintenant = nouvelle date ();
alert ("Le code a fonctionné dans" + now.getHours () + ":" + now.getMinutes ());
}
Bouton d'appel de fonction
Étape 3
La même méthode doit être utilisée lorsque vous cliquez sur plusieurs boutons différents pour déclencher un événement pouvant être décrit avec le même code JavaScript. Par exemple, vous pouvez légèrement modifier la fonction précédente pour ajouter l'identification du bouton appuyé à la boîte de message: function getTime (btnString) {
var maintenant = nouvelle date ();
alert (btnString + "clicked in" + now.getHours () + ":" + now.getMinutes ());
} Le code complet d'une page avec trois de ces boutons pourrait ressembler à ceci:
Trois boutons avec un appel de fonction
fonction getTime (btnString) {
var maintenant = nouvelle date ();
alert (btnString + "clicked in" + now.getHours () + ":" + now.getMinutes ());
}
Premier bouton
Deuxième bouton
Troisième bouton
