Événement n'appelant pas lorsqu'il est attaché avec addEventListener

Question

J'essaie de créer une fonction qui compte le nombre de caractères restants. Je veux utiliser addEvenetListener pour écouter les types d'événements:

var output = document.getElementById('output'); 
 
\t var tweetTxt = document.getElementById("tweettext"); 
 
\t var charCount = 10; 
 
\t var tweetTxt = document.getElementById("tweettext"); 
 

 
    
 
    
 
\t function textCounter(){ 
 
\t \t console.log("it works"); 
 
\t \t var count = charCount - document.getElementById("tweettext").value.length; 
 
\t \t 
 
\t \t if(count < 0){ 
 
\t \t \t output.classList.add("red"); 
 
\t \t \t output.classList.remove("black"); 
 
\t \t \t console.log("Less than zero"); 
 
\t \t }else{ 
 
\t \t \t output.classList.add("black"); 
 
\t \t \t output.classList.remove("red"); 
 
\t \t } 
 
\t \t output.innerHTML = count + " characters left"; 
 
\t } 
 
\t 
 

 
    tweetTxt.addEventListener('onKeyDown', textCounter, false); 
 
    tweetTxt.addEventListener('onKeyUp', textCounter, false); 
 
    tweetTxt.addEventListener('onChange', textCounter, false);

<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div> 
 
\t \t \t <textarea name="tweettext" id="tweettext"> 
 
\t \t \t \t 
 
\t \t \t </textarea> 
 
\t \t </div> 
 
\t \t <div id="output" class="black"> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</div>

Pour une raison quelconque, cela ne fonctionne pas. Mais quand j'attache les auditeurs à l'élément <textarea> cela fonctionne:

var output = document.getElementById('output'); 
 
\t //var tweetTxt = document.getElementById("tweettext"); 
 
\t var charCount = 10; 
 
\t var tweetTxt = document.getElementById("tweettext"); 
 

 
    
 
    
 
\t function textCounter(){ 
 
\t \t console.log("it works"); 
 
\t \t var count = charCount - document.getElementById("tweettext").value.length; 
 
\t \t 
 
\t \t if(count < 0){ 
 
\t \t \t output.classList.add("red"); 
 
\t \t \t output.classList.remove("black"); 
 
\t \t \t console.log("Less than zero"); 
 
\t \t }else{ 
 
\t \t \t output.classList.add("black"); 
 
\t \t \t output.classList.remove("red"); 
 
\t \t } 
 
\t \t output.innerHTML = count + " characters left"; 
 
\t } 
 
\t 
 

 
/* tweetTxt.addEventListener('onKeyDown', textCounter, false); 
 
    tweetTxt.addEventListener('onKeyUp', textCounter, false); 
 
    tweetTxt.addEventListener('onChange', textCounter, false); */

<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div> 
 
\t \t \t <textarea name="tweettext" id="tweettext" onKeyUp="textCounter();" onKeyDown="textCounter();" onChange="textCounter();"> 
 
\t \t \t \t 
 
\t \t \t </textarea> 
 
\t \t </div> 
 
\t \t <div id="output" class="black"> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</div>

Alors, qu'est-ce que je fais mal avec addEvenetListener bien au-dessus?

Answer 1

Lorsque vous souhaitez joindre un événement à l'aide de addEventListener, n'utilisez pas le préfixe "on". Par exemple, vous devez utiliser comme keydown au lieu de .

tweetTxt.addEventListener('keydown', textCounter, false); 
tweetTxt.addEventListener('keyup', textCounter, false); 
tweetTxt.addEventListener('change', textCounter, false); 

DEMO

Note: La méthode addEventListener() est pas pris en charge dans Internet Explorer 8 et les versions antérieures.

Answer 2

Tout simplement changer le nom de l'événement sur votre code à ceci:

var output = document.getElementById('output'); 
 
var charCount = 10; 
 
var tweetTxt = document.getElementById("tweettext"); 
 

 
function textCounter(){ 
 
    console.log("it works"); 
 
    var count = charCount - document.getElementById("tweettext").value.length; 
 

 
    if(count < 0){ 
 
    output.classList.add("red"); 
 
    output.classList.remove("black"); 
 
    console.log("Less than zero"); 
 
    }else{ 
 
    output.classList.add("black"); 
 
    output.classList.remove("red"); 
 
    } 
 
    output.innerHTML = count + " characters left"; 
 
} 
 

 
tweetTxt.addEventListener('keydown', textCounter, false); 
 
tweetTxt.addEventListener('keyup', textCounter, false); 
 
tweetTxt.addEventListener('change', textCounter, false);

<div class="container"> 
 
    <div class="row"> 
 
    <div> 
 
     <textarea style="width: 100%" name="tweettext" id="tweettext" rows="10"></textarea> 
 
    </div> 
 
    <div id="output" class="black"> 
 

 
    </div> 
 
    </div> 
 
</div>

Cependant, vous avez ajouté 3 événements à un élément, il les incendies au moins 3 fois. Lorsque vous tapez quelque chose, chaque caractère tapé déclenche 2 événements. Clé vers le bas et la clé vers le haut. Lorsque vous avez perdu le focus sur textarea, l'événement change se déclenche. Ma suggestion est simple, utilisez l'événement keyup ou keydown, avec des conditions supplémentaires pour vérifier si l'utilisateur tape des caractères valides (ne pas appuyer sur la touche ecc, les touches de fonction, etc.). Si vous n'avez pas besoin du compte pour être en ligne, utilisez l'événement de changement.

Il existe un autre événement auquel vous pouvez attacher pour remplacer le keyup, keydown.

tweetTxt.addEventListener('input',function(e){ 
 
    // yourcode 
 
});

Bonne chance.