title: How to get the current value of a form input updated at each change without using jquery only using javaScript
body: <p>here I'm trying to make an inscription form an as a form validation i've chosen that the name must contain at least 2 charecters, So i've added an event listner to the input with the <code>id="nom"</code> but the problem that occurs here is that the code gets only the initial value which is empty so it doesn't really matter what the user write in the specified input field the event will be launched with the empty value.</p>
  
  <pre><code> `&lt;!DOCTYPE html&gt;
      &lt;html&gt;
            &lt;head&gt;
              &lt;meta charset="utf-8"&gt;
              &lt;link rel="stylesheet" href="style.css"&gt;
  
            &lt;/head&gt;
      &lt;body&gt;
          &lt;form action="#" method="get"&gt;
             &lt;fieldset id="fieldset"&gt;
                  &lt;legend&gt;Inscription :&lt;/legend&gt;
  
                  &lt;label for=""&gt;Sexe :&lt;/label&gt;&lt;br&gt;
                  &lt;input type="radio" name="gender" value="male" checked&gt;&lt;label for="male"&gt;Homme&lt;/label&gt;
                  &lt;br&gt;&lt;input type="radio" name="gender" value="female"&gt;&lt;label for="female"&gt;Femme&lt;/label&gt;
                  &lt;br&gt;&lt;sapn class="tooltip"&gt;Vous devez selectionner votre sexe&lt;/sapn&gt;
  
                  &lt;br&gt;&lt;br&gt;&lt;label&gt;Nom :&lt;/label&gt;&lt;br&gt;
                  &lt;input type="text" id="nom"&gt;
                  &lt;sapn class="tooltip"&gt;Un nom ne peut pas faire moins de 2 caractères&lt;/sapn&gt;
  
                  &lt;br&gt;&lt;br&gt;&lt;label&gt;Prénom :&lt;/label&gt;&lt;br&gt;
                  &lt;input type="text" id="prenom"&gt;
                  &lt;sapn class="tooltip"&gt;Un prénom ne peut pas faire moins de 2 caractères&lt;/sapn&gt;
  
                  &lt;br&gt;&lt;br&gt;&lt;label&gt;Age :&lt;/label&gt;&lt;br&gt;
                  &lt;input type="text" id="age"&gt;
                  &lt;sapn class="tooltip"&gt;l'age doit etre compris entre 5 et 140&lt;/sapn&gt;
  
                  &lt;br&gt;&lt;br&gt;&lt;label&gt;Pseudo :&lt;/label&gt;&lt;br&gt;
                  &lt;input type="text" id="pseudo"&gt;
                  &lt;sapn class="tooltip"&gt;Le pseudo ne peut pas faire moins de 4 caractères&lt;/sapn&gt;
  
                  &lt;br&gt;&lt;br&gt;&lt;label&gt;Mot de passe :&lt;/label&gt;&lt;br&gt;
                  &lt;input type="password" id="mdp"&gt;
                  &lt;sapn class="tooltip"&gt;Le mot de passe ne peut pas faire moins de 6 caractères&lt;/sapn&gt;
  
                  &lt;br&gt;&lt;br&gt;&lt;label&gt;Mot de passe (confirmation):&lt;/label&gt;&lt;br&gt;
                  &lt;input type="password" id="mdpconf"&gt;
                  &lt;sapn class="tooltip"&gt;Le mot de passe de confirmation doit etre identique à celui d'origine&lt;/sapn&gt;
  
                  &lt;br&gt;&lt;br&gt;&lt;label for="country"&gt;Pays :&lt;/label&gt;&lt;br&gt;
                  &lt;select name="country" id="country"&gt;        
                          &lt;option value="none" selected &gt;Selectionnez votre pays&lt;/option&gt;
                          &lt;option value="Allemagne" &gt;Allemagne&lt;/option&gt;
                          &lt;option value="France" &gt;France&lt;/option&gt;
                          &lt;option value="Tunisie" &gt;Tunisie&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;sapn class="tooltip"&gt;Vous devez selectionner votre pays de résidence&lt;/sapn&gt;
  
                  &lt;br&gt;&lt;br&gt;&lt;label for="mail"&gt;Recevoir des mails &lt;/label&gt;
                  &lt;input type="checkbox" class="answer"&gt;
  
                  &lt;br&gt;&lt;br&gt;&lt;input type="submit" value="M'inscrire" id="submit"&gt;
                  &lt;input type="reset" value="Reintitialiser le formulaure" id="reset"&gt;
  
  
             &lt;/fieldset&gt;
  
          &lt;/form&gt;
          &lt;script&gt;
                  (function (){
                  var nom = document.getElementById('nom');
                  var prenom = document.getElementById('prenom');
                  var sexe = document.querySelectorAll('input[type = checkbox],checked');
                  var age = document.getElementById('age');
                  var pseudo = document.getElementById('pseudo');
                  var mdp = document.getElementById('mdp');
                  var mdpconf = document.getElementById('mdpconf');
                  var pays = document.getElementById('country');
                  var tooltips = document.querySelectorAll(".tooltip");
                  for(i = 0;i &lt; tooltips.length; i++){
                     tooltips[i].style.display = 'none';
                  }
                  function moreThenTwo(text){
  
                      if (text.value.length &lt; 2){
  
                               text.style.borderColor="red";
                               tooltips[1].style.display = "inline-block";
                               age.value = text.value.length;
                            }
                            else
                               text.style.borderColor = "green";
                          };
  
                          nom.addEventListener('change',moreThenTwo(nom));
  
                  })();
  
          &lt;/script&gt;
      &lt;/body&gt;  
      &lt;/html&gt;`
  </code></pre>