Cet article démontrera les méthodes pour obtenir et définir des valeurs de texte d'entrée en JavaScript.
Comment obtenir et définir la valeur du texte d'entrée en JavaScript ?
Pour obtenir et définir la valeur du texte d'entrée en JavaScript, utilisez :
- ' getElementById() ' méthode
- ' getElementByClassName() ' méthode
- ' querySelector() ' méthode
Parcourez chacune des méthodes mentionnées une par une!
Méthode 1 : Obtenir et définir la valeur du texte d'entrée dans JavaScript à l'aide de la méthode document.getElementById()
La ' getElementById() ” accède à un élément avec l'ID spécifié. Cette méthode peut être appliquée pour accéder aux identifiants des champs de saisie et des boutons permettant d'obtenir et de définir la valeur du texte.
Syntaxe
document. getElementById ( éléments )
Ici, ' éléments ” fait référence à l'ID spécifié d'un élément.
L'exemple ci-dessous explique le concept discuté.
Exemple
Tout d'abord, incluez deux champs de type d'entrée et des boutons séparés pour obtenir et définir les valeurs de texte d'entrée avec le ' sur clic ” événements qui accéderont aux fonctions spécifiées :
< bouton onclick = 'getText()' > Obtenir de la valeur bouton >
< bouton onclick = 'getAndSetText()' > Définir la valeur bouton >
< type d'entrée = 'texte' identifiant = 'Définir le texte' Nom = 'Définir le texte' sur clic = 'cette.valeur = '' ' />
Ensuite, récupérez la valeur du champ de saisie à l'aide de la méthode document.getElementById() :
document. getElementById ( 'getText' ) . évaluer = 'Entrez ici' ;Maintenant, déclarez une fonction nommée ' getAndSetText() ”. Ici, récupérez le champ de saisie avec le ' getText ' id et passez la valeur d'entrée au champ d'entrée suivant ayant ' Définir le texte ' identifiant:
fonction getAndSetText ( ) {a été Définir le texte = document. getElementById ( 'getText' ) . évaluer ;
document. getElementById ( 'Définir le texte' ) . évaluer = Définir le texte ;
}
De même, définissez une fonction nommée ' getText() ”. Après cela, obtenez le champ de saisie avec ' getText ” id et transmettez la valeur particulière à la boîte d'alerte pour obtenir la valeur du texte d'entrée :
fonction getText ( ) {a été getText = document. getElementById ( 'getText' ) . évaluer ;
alerte ( getText ) ;
}
Production
Méthode 2 : obtenir et définir la valeur du texte d'entrée dans JavaScript à l'aide de la méthode document.getElementByClassName()
La ' getElementByClassName() ” accède à un élément à l'aide du nom de classe spécifié. Cette méthode, de la même manière, peut être appliquée pour accéder à la classe du champ de saisie et aux boutons permettant de saisir et de définir la valeur du texte.
Syntaxe
document. getElementsByClassName ( nom du cours )Dans la syntaxe ci-dessus, le ' nom du cours ” représente le nom de classe des éléments.
Exemple
Comme dans l'exemple précédent, nous allons d'abord accéder au premier champ de saisie avec le ' getText ' nom du cours. Ensuite, définissez une fonction nommée ' getAndSetText() ” et récupérez le champ d'entrée spécifié en fonction de son nom de classe et définissez la valeur dans le champ d'entrée suivant :
fonction getAndSetText ( )
{
a été Définir le texte = document. getElementByClassName ( 'getText' ) . évaluer ;
document. getElementById ( 'Définir le texte' ) . évaluer = Définir le texte ;
}
De même, définissez une fonction nommée ' getText() ”, ajoutez le nom de classe du premier champ de saisie et transmettez la valeur particulière à la boîte d'alerte pour afficher la valeur récupérée :
fonction getText ( ) {a été getText = document. getElementByClassName ( 'getText' ) . évaluer ;
alerte ( getText ) ;
}
Cette implémentation donnera le résultat suivant :
Méthode 3 : obtenir et définir la valeur de texte d'entrée en Javascript à l'aide de la méthode 'document.querySelector()'
La ' document.querySelector() ” va chercher le premier e est descendu qui correspond au sélecteur spécifié, et la méthode addEventListener() peut ajouter un gestionnaire d'événements à l'élément sélectionné. Ces méthodes peuvent être appliquées pour obtenir l'ID du champ de saisie et des boutons et leur appliquer un gestionnaire d'événements.
Syntaxe
document. querySelector ( Sélecteurs CSS )Ici, ' Sélecteurs CSS ” font référence à un ou plusieurs sélecteurs CSS.
Regardez l'exemple suivant.
Exemple
Tout d'abord, incluez les types d'entrée avec leurs valeurs d'espace réservé et les boutons permettant d'obtenir et de définir les valeurs de texte d'entrée :
< identifiant du bouton = 'obtenir' > OBTENIR bouton >
< type d'entrée = 'texte' identifiant = 'jeu d'entrées' espace réservé = 'Définir la valeur' >
< identifiant du bouton = 'Positionner' > POSITIONNER bouton >
Ensuite, récupérez les champs de saisie et les boutons ajoutés à l'aide de la touche ' document.querySelector() ' méthode:
laissez le boutonGet = document. querySelector ( '#obtenir' ) ;laisser le boutonDéfinir = document. querySelector ( '#Positionner' ) ;
laissez getInput = document. querySelector ( '#entrée-obtenir' ) ;
laissez setInput = document. querySelector ( '#jeu d'entrées' ) ;
laisser le résultat = document. querySelector ( '#résultat' ) ;
Ensuite, incluez un gestionnaire d'événements nommé ' Cliquez sur ” pour les deux boutons pour obtenir et définir les valeurs, respectivement :
boutonObtenir. addEventListener ( 'Cliquez sur' , ( ) => {résultat. Texteintérieur = getInput. évaluer ;
} ) ;
boutonDéfinir. addEventListener ( 'Cliquez sur' , ( ) => {
getInput. évaluer = setInput. évaluer ;
} ) ;
Production
Nous avons discuté des méthodes les plus simples pour obtenir et définir la valeur du texte d'entrée en JavaScript.
Conclusion
Pour obtenir et définir la valeur du texte d'entrée en JavaScript, utilisez le ' document.getElementById() » ou la méthode
' document.getElementByClassName() ” pour accéder au champ de saisie et aux boutons spécifiés en fonction de leurs identifiants ou de leur nom de classe, puis définir leurs valeurs. De plus, le « document.querySelector() ” peut également être utilisé pour obtenir et définir des valeurs de texte d'entrée en JavaScript. Ce blog a expliqué les méthodes pour obtenir et définir des valeurs de texte d'entrée en JavaScript.