Comment récupérer la valeur d’un input javascript ?

Dans ce tutoriel, nous vous montrerons comment récupérer la valeur d’un input javascript.

JavaScript est un langage pour les pages Web. Pratiquement, des scripts JavaScript peuvent être inclus dans vos pages HTML. Avec JavaScript vous avez de nombreuses possibilités pour enrichir vos pages HTML avec des éléments vraiment intéressants. 

Comment accéder aux éléments HTML en javascript ? 

Un élément d’une page HTML peut être récupéré de différentes manières :

l’attribut ‘id’

             getElementById() : vous permet d’accéder aux éléments HTML auxquels vous avez attribué un identifiant avec l’attribut HTML id (un seul attribut par élément).

                  const page = document.getElementById("page"); 

Le nom de la balise

getElementsByTagName(Tag) : autorise l’accès à tous les éléments d’une balise HTML donnée.

  Lorsque vous avez besoin de récupérer tous les éléments d’une page qui ont une balise spécifique (par exemple tous les paragraphes, ou tous les, etc.).

  La méthode getElementsByTagName() d’un élément HTML permet de récupérer tous les éléments de la page correspondant à la balise passée à la méthode en paramètre sous forme de chaîne.

Le nom de la classe CSS

getElementsByName(Value) : pour accéder aux éléments HTML qui ont un attribut de nom HTML (il peut y en avoir plusieurs, comme dans l’exemple d’image).

⇒  getElementsByClassName(class)

const items = document.getElementsByClassName("item");  

Sélecteurs CSS

            ⇒ les deux méthodes sont querySelector() y et querySelectorAll()

                      const page = document.querySelector("#page");  

Exemple d’utilisation de getElementById

En JavaScript, getElementById est utilisé pour obtenir la valeur de la zone de texte d’entrée avec un attribut ID. Cette méthode est utilisée pour renvoyer une sortie d’une valeur spécifiée. Renvoie null si l’élément n’est pas présent ici. La plupart des utilisateurs l’utilisent pour lire et modifier des éléments HTML. La syntaxe de getElementById est la suivante :

document.getElementById("Input ID").value;

Tout d’abord, le champ de saisie est utilisé pour capturer les entrées de l’utilisateur.

Après cela, la fonction getInputValue() est utilisée pour s’approprier la valeur à l’aide de getElementById.value.

<center><h2>Un exemple d'obtention de la valeur du champ de saisie de texte.
h2>
<input type="text" placeholder="Type "id="ID input">
<fr>fr>
<script>
get function Input Value(){= document.getElementById("Input ID").value;
warn(value);} script> <button type="button"on click="get Input Value();">push button button> center>

Exemple d’utilisation getElementsByClassName

En JavaScript, une autre méthode appelée getElementsByClassName est utilisée pour obtenir la valeur du champ de saisie de texte. Renvoie la collection d’éléments spécifiés par le nom de la classe. La méthode getElementsByClassName() est appelée à l’aide de l’élément de document. Recherche dans tout le document et affiche tous les éléments enfants du document.

Un nouveau bouton est créé avec la fonction getInputValue() sur son événement onclick.

 La syntaxe d’utilisation de cette méthode est donnée ci-dessous :

document.getElementsByClassName("classe d'entrée")[0].value;

 La syntaxe est décrite comme suit : input Class : représente le nom de la classe. [0] : Représente que s’il n’y a pas d’élément correspondant ici, renvoie undefined.

<p>Utilisez la méthode getElementsByClassName et afficher.
p>
<input type="text" placeholder="Type "id="input id"class="input class">
<button type="button"on click="getInputValue();">Get buttonvalue>
<script>
getInputValue() function {allow inputVal = document.getElementsByClassName("classe d'entrée")[0].value;warn(input_Val); } script>