Comment définir la valeur d'un champ de saisie dans JavaScript?

Les manipulations DOM utilisant JavaScript permet au programmeur de modifier les éléments ou même les attributs des éléments d'une page Web HTML. La modification de la valeur du champ de saisie n'est pas différente. Il existe deux approches pour modifier la valeur d'un champ de saisie en utilisant JavaScript. Ceux-ci sont:

• Attribution de l'attribut de valeur d'un élément une valeur à l'aide de l'opérateur d'affectation «="
• En utilisant le SetAttribute () fonction.

Sautons simplement à l'intérieur de la démonstration de ces deux méthodes, mais avant cela, nous avons besoin d'un modèle HTML pour travailler avec.

Configuration d'une page Web HTML

Dans le fichier HTML, ajoutez simplement les lignes suivantes pour créer un nouveau champ de saisie de texte avec l'ID "TextFeild1"

Lorsque nous exécutons le programme, nous allons à la sortie suivante sur notre navigateur:

Nous pouvons voir notre champ de saisie sur l'écran.

Méthode 1: Attribuez directement l'attribut de valeur

Pour cela, nous allons d'abord ajouter les lignes suivantes dans notre fichier HTML:

Modification de la valeur

Cela ajoutera un nouveau bouton sous notre champ de texte. Et nous avons joint une fonction sur le clic sur ce bouton nommé comme ChangeValue ():

Dans le fichier de script, nous allons ajouter les fonctionnalités suivantes pour que ce bouton fonctionne:

fonction changeValue ()
textfield = document.GetElementById ("TextField1");
champ de texte.Value = "Méthode 1";

Nous obtenons d'abord une référence à notre champ de texte en utilisant le document.getElementByid (). Après cela, nous utilisons l'opérateur de points pour obtenir l'attribut de valeur et lui attribuer directement une valeur de chaîne. En cliquant sur ce bouton, nous obtenons la sortie suivante:

Comme vous pouvez le voir, nous avons pu modifier la valeur du champ de saisie à l'aide de l'opérateur de points et de l'attribut de valeur.

Méthode 2: Utilisation de la fonction setAttribute ()

Pour cela, nous allons ajouter un nouveau bouton droit sous le bouton précédent en utilisant les lignes suivantes dans le fichier HTML:

Changement par setAttribute ()

Comme vous pouvez le voir, nous avons joint ce bouton avec une fonction nommée setAttributeChange (). En chargeant ce HTML, nous obtenons la page Web suivante sur notre navigateur:

Ensuite, nous nous dirigeons dans le fichier de script et définissons ceci setAttributeChange () Changer la fonction comme suit:

fonction setAttributeChange ()
textfield = document.GetElementById ("TextField1");
champ de texte.setAttribute ("valeur", "méthode 2");

Dans la première ligne, nous obtenons une référence au champ de texte en utilisant le document.getElementByid () fonction. Après cela, nous utilisons le dot-opérateur et le setAttribute () Fonction pour choisir l'attribut "valeur«Et puis donnez-lui une valeur de chaîne comme«Méthode 2". En cliquant sur le bouton, nous obtenons la sortie suivante:

Comme vous pouvez le voir, nous avons pu modifier la valeur du champ de saisie à l'aide de la fonction setAttribute ().

Conclusion

À l'aide de manipulations DOM, JavaScript nous permet de modifier facilement l'attribut de valeur d'un champ de saisie dans une page Web HTML. Pour cela, nous avons deux approches différentes qui nous conduisent au même résultat. Nous avons l'élément.Fonction setAttribute () qui nous permet de choisir un attribut et de lui donner une certaine valeur de notre choix. Deuxièmement, nous avons la possibilité de sélectionner l'attribut à l'aide du «dot"Puis attribuez cet attribut toute valeur à l'aide de l'opérateur d'affectation"=."