Ce guide démontrera l'objectif et le fonctionnement de l'événement 'onchange' en JavaScript.
Comment utiliser un événement 'onchange' en JavaScript ?
Le ' sur le changement ” s'active lorsque la valeur de l'élément HTML spécifié est modifiée. Lorsque cet événement se déclenche, la fonction JavaScript associée s'exécute pour effectuer la tâche spécifique.
Syntaxe
objet. sur le changement = fonction ( ) { monScript } ;
Dans la syntaxe ci-dessus :
- élément: Il désigne l'élément HTML particulier.
- fonction(): Il représente la fonction définie qui sera invoquée lors du déclencheur d'événement.
- monScript : Il fait référence à la définition de la fonction JavaScript pour effectuer la tâche spécifique lorsque l'événement 'onchange' se produit.
Syntaxe(Avec la méthode 'addEventListener()')
objet. addEventListener ( 'changement' , monScript ) ;
Dans la syntaxe ci-dessus, le ' addEventListener() ” méthode utilise le “ sur le changement ” événement pour exécuter la fonction JavaScript pour effectuer diverses tâches.
Exemple 1 : Application de l'événement 'onchange' pour afficher la valeur sélectionnée à l'aide de la syntaxe de base
Dans ce scénario, un événement 'onchange' est associé à une liste d'options pour afficher la valeur d'option modifiée et appeler la fonction JavaScript correspondante.
Code HTML
Jetez un oeil au code HTML suivant :
< h2 > sur le changement Événement en Javascript h2 >< p > Choisissez une autre langue dans la liste. p >
< sélectionner l'identifiant = 'démo' sur le changement = 'Goûter()' >
< valeur d'option = 'HTML' > HTML option >
< valeur d'option = 'CSS' > CSS option >
< valeur d'option = 'JavaScript' > Javascript option >
sélectionner >
< identifiant p = 'P1' > p >
Dans le code ci-dessus :
- Tout d'abord, définissez un sous-titre à l'aide du ' ' étiqueter.
- Ensuite, ajoutez un paragraphe avec la déclaration indiquée.
- Après cela, le «
' La balise crée une liste déroulante avec un identifiant attribué ' démo ' et le ' sur le changement « l'événement redirige vers la fonction » Goûter() ', respectivement. - Dans le corps de la balise '
- Enfin, un paragraphe vide est créé avec un identifiant ' P1 ” pour afficher la valeur sélectionnée/modifiée dans la liste d'options.
Code Javascript
Maintenant, aperçu du code JavaScript suivant :
< scénario >fonction Échantillon ( ) {
où = document. getElementById ( 'démo' ) . valeur ;
document. getElementById ( 'P1' ) . innerHTML = 'L'option sélectionnée est :' + t ;
}
scénario >
Dans le bloc de code ci-dessus :
- Tout d'abord, déclarez une fonction nommée ' Goûter() ”.
- Dans sa définition, appliquer le « getElementById() ” pour accéder à la valeur de l'option sélectionnée dans la liste des options via la touche “ valeur ' propriété.
- Enfin, affichez la valeur à l'aide de la touche ' innerHTML ' propriété.
Sortir
Comme on le voit dans la sortie, lors de la sélection d'une option dans la liste déroulante, l'événement 'onchange' se déclenche et appelle la fonction correspondante.
Exemple 2 : application de l'événement « onchange » pour modifier le texte du champ de saisie en majuscules à l'aide de la syntaxe de la méthode « addEventListener() »
Cet exemple explique le fonctionnement de l'événement 'onchange' en changeant le champ de texte de saisie en 'Majuscule' à l'aide de la méthode 'addEventListener()'.
Code HTML
Tout d'abord, parcourez le code HTML fourni ci-dessous :
< h2 > sur le changement Événement en Javascript h2 >Nom : < type d'entrée = 'texte' identifiant = 'démo' >
< bouton > Soumettre bouton >
Dans le code HTML ci-dessus :
- Définissez un sous-titre de niveau 2 via le « ' étiqueter.
- Ensuite, ajoutez un '
« champ près de l'étiquette » Nom ', type de contenu ' texte ', et l'identifiant associé' démo ', respectivement. - Enfin, incluez un bouton en utilisant le '
' étiqueter.
Code Javascript
Ensuite, regardez le code JavaScript suivant :
< scénario >document. getElementById ( 'démo' ) . addEventListener ( 'changement' , Goûter ) ;
fonction Échantillon ( ) {
où = document. getElementById ( 'démo' ) ;
t. valeur = t. valeur . enMajuscule ( ) ;
}
scénario >
Dans ce bloc de code :
- Premièrement la ' document.getElementById() ” méthode utilise le “ changement ” événement qui entraînera la modification de la valeur du champ de texte de saisie ayant id “ démo ” en cliquant sur le bouton.
- Ensuite, la fonction 'Sample ()' est définie qui utilise la méthode 'document.getElementById ()' pour accéder au champ de texte d'entrée 'demo' puis change sa valeur en 'Uppercase' via le ' Majuscule() ' méthode.
Sortir
Comme on le voit, le texte d'entrée a été converti en majuscule lors du clic sur le bouton.
Conclusion
JavaScript offre le ' sur le changement » événement qui se déclenche dès que l'état de la valeur d'un élément particulier change. Il est similaire au ' en entrée ' mais l'événement 'oninput' se produit instantanément lorsque la valeur change tandis que l'événement 'onchange' se déclenche lorsque la valeur de l'événement perd le focus. Ce guide a démontré l'objectif, le fonctionnement et l'utilisation de l'événement 'onchange' en JavaScript.