Récupérer la valeur d’un INPUT en JavaScript


Récupérer la valeur d’un INPUT en JavaScript

  1. Objectifs
    • ِEtre capable de gérer une ligne de texte avec JavaScript




  2. Introduction

    • La zone de texte est l’élément d’entrée/sortie par excellence de Javascript.
    • La syntaxe Html est :

      pour un champ de saisie d’une seule ligne, de longueur x et de longueur maximale de y.
  3. L

    ire une valeur dans une zone de texte

    • Pour comprendre comment lire un texte écrit dans un champ de saisie d’une seule ligne, voici un exemple que nous le détaillerons petit à petit :
      1. Afficher le contenu dans une boite d’alerte
        • Saisir une valeur dans la zone de texte et la reproduire dans une boite d’alerte
        • Lorsque le bouton est cliqué, JavaScript appelle la fonction controle() récupère, par l’intermédiaire de la variable de la fonction saisie()
      2. Afficher le contenu dans une autre zone de texte
        • Saisir une valeur dans une zone de texte et la reproduire dans une autre zone de texte
        • Lorsque le bouton afficher est cliqué JavaScript appelle la fonction afficher().
          Cette fonction afficher() récupère, par l’intermédiaire de la variable saisie , la valeur de la zone de texte texte1 et le copie dans la zone de texte texte2
      3. Tester s’il est vide
        • Dans un formulaire, vous voulez que certains champs soient obligatoirement remplies.
        • Ce qui veux dire qu’on interdit les champs vides.
        • Dans l’exemple suivant on va voir comment réaliser cela dans une fonction javascript ?
        • La fonction valider() appelée par le le clic sur le bouton (onclicck=”valider’)”),récupère dans la variable input la longueur de ce qui à été saisie dans la zone de texte (document.getElementById(“input”).value)
      4. Récupérer le texte d’une balise HTML en Javascript
        • Dans l’exemple ci-dessous nous allons utiliser la balise <div> comme exemple pour la récupération du texte. Il existe deux méthodes pour récupérer le texte d’une balise, soit on utilise la propriété textContent ou innerText.
        • Méthode 1 : En utilisant la propriété textContent
        • Méthode 2 : En utilisant la propriété innerText




Sommaire du cours JavaScript



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement