Impossible d'obtenir la valeur du champ de saisie JS

Question

Je suis très nouveau dans JS et HTML, donc mes excuses. J'ai eu des problèmes pour essayer de valider l'entrée dans un champ de formulaire avec l'attribut pattern = ''. Bien qu'il saisisse une entrée non valide et donne le message d'erreur approprié, les modifications ultérieures de l'entrée ne changent pas le message d'erreur. Par exemple,

pattern="[a-zA-Z]" produira le message approprié si l'utilisateur entre "test2" dans le champ. Mais si l'utilisateur modifie l'entrée "testing", j'obtiens toujours une erreur de validation. En essayant de comprendre cela, j'ai essayé de connecter l'entrée de champ à la console. Ainsi, dans le code HTML:

<input class="dest_one_key" name="dest_one_key" type="text" id="dest_one_key" required="" placeholder="Work">

puis:

<script> var v = document.getElementById('dest_one_key').value; document.getElementById('dest_one_key').addEventListener('change', function() { console.log( Valeur: $ {v} ); }); </script>

... qui yeilds

"Valeur"

dans la console. Ainsi, le formulaire ne semble pas capturer l'entrée des utilisateurs. Ce que je fais mal à l'égard de: 1) Ne pas pouvoir enregistrer correctement que l'utilisateur a une entrée valide après une entrée invalide 2) la journalisation de la valeur du champ à la console?

Answer 1

Puisque votre script n'est exécuté qu'une seule fois, la variable v sera vide. Vous devez le changer au fil du temps en utilisant event.target.value dans votre événement. Comme ceci:

var v; 
 

 
document.getElementById('dest_one_key').addEventListener('change', function(event) { 
 
    v = event.target.value; 
 
    console.log('Value: ' + v); 
 
});

<input class="dest_one_key" name="dest_one_key" type="text" id="dest_one_key" required="" placeholder="Work">