Fonction JavaScript/écouteur d'événements ne fonctionne pas correctement

Je suis complètement nouveau pour JavaScript, et je ne sais pas pourquoi cela ne fonctionne pas. Lorsque je clique sur la zone de saisie et tapez moins de 5 caractères, je veux afficher un message. Le message ne montre tout simplement pas. Code source: https://jsfiddle.net/015por64/Fonction JavaScript/écouteur d'événements ne fonctionne pas correctement

<html> 
 
    <body> 
 
    <form id="form>"> 
 
     <input id="input"> 
 
     <div id="text"> Test </div> 
 
     </input> 
 
     </form> 
 
    </body> 
 
</html> 
 

 
<script> 
 
function checkUserName(e, minLength) { 
 
    var username = document.getElementById("input"); 
 
    var usernameLength = username.textContent; 
 
    if (usernameLength.value.length < 5) { 
 
     msg = "Your username must consist of at least five characters." 
 
    }; 
 
    else { 
 
     msg = ""; 
 
     text.innerHTML=msg 
 
    }; 
 
} 
 
var text = document.getElementById("text"); 
 
text.addEventListener("blur", function(e) {checkUserName(e, 5)}, false) 
 
</script>

Source

2017-08-06 Christoffer Corfield Aakre

Pour les éléments 'input', vous devriez lire la propriété' value' au lieu de 'textContent'. Notez également que 'input' est un élément vide et qu'il n'a pas de balise de fin. – undefined

Merci, mais même lorsque je change textContent en valeur, cela ne fonctionne pas. –

Pourquoi écoutez-vous l'événement 'blur' de l'élément' div'? Vous devriez écouter l'événement 'keyup' de l'entrée. – undefined

Peu de problèmes avec votre code:

vous devez joindre l'événement à #input et non le div#text.
vous devez lire la valeur de #input et non textcontent
; après si est faux car alors d'autre donnera erreur de syntaxe.

<html> 
 
    <body> 
 
    <form id="form>"> 
 
     <input id="input"> 
 
     <div id="text"> Test </div> 
 
     </input> 
 
     </form> 
 
    </body> 
 
</html> 
 

 
<script> 
 
function checkUserName(e, minLength) { 
 
    var username = document.getElementById("input"); 
 
    var usernameLength = username.value; 
 
    if (usernameLength.length < 5) { 
 
     msg = "Your username must consist of at least five characters."; 
 
     text.innerHTML=msg; 
 
    }else { 
 
     msg = ""; 
 
     text.innerHTML=msg; 
 
    }; 
 
} 
 
var text = document.getElementById("text"); 
 
document.getElementById('input').addEventListener("blur", function(e) {checkUserName(e, 5);}, false) 
 
</script>

Source

2017-08-06 22:07:48 Dij

Merci, ceci l'a réparé! Apparemment, je ne peux pas accepter la réponse pendant 7 minutes, mais je le ferai une fois que je le peux. Merci encore :) –

Il devrait être l'entrée où vous devez mettre l'écouteur d'événement flou.

var input = document.getElementById("input");

Et puisque vous avez aucune utilité pour text en dehors de la fonction, de mieux définir à l'intérieur.

Source

2017-08-06 22:09:13 Jed

Fonction JavaScript/écouteur d'événements ne fonctionne pas correctement

Répondre

Questions connexes