How to count number of typed character in textarea using javascript?

Question

I don't know why inner HTML is not working when I put it inside function but it works fine when I try the same in my console.

Here is my code. (It is for character count.)

for (var i = 0; i < document.getElementsByClassName("input-content").length; i++) {
    document.getElementsByClassName("input-content")[i].onkeyup = function () {
        console.log(this);
        var text_max = 99;
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;
        document.getElementsByClassName("character-count")[i].innerHTML = "Character count:" + text_length + "/" + text_max;
    }
}

My HTML

<textarea type="text" class="input-content"></textarea>
<p class="character-count"></p>

I know this may be something silly which I am missing out.

PS: I'm looking for a pure JavaScript answer. Please don't suggest jQuery.

UPDATE: It works fine when i do not use onkeyup event but the count doesnot increase

    for(var i=0; i<document.getElementsByClassName("input-content").length;i++)
{
 var text_max = 99;
 var text_length = document.getElementsByClassName("input-content")[i].value.length;
 var text_remaining = text_max - text_length;
 document.getElementsByClassName("character-count")[i].innerHTML="Character count:" +text_length+"/"+text_max;    
 }

Answer 1

You could use a closure for the index:

 for (var i = 0; i < document.getElementsByClassName("input-content").length; i++) { document.getElementsByClassName("input-content")[i].onkeyup = function (i) { return function () { console.log(this); var text_max = 99; var text_length = this.value.length; var text_remaining = text_max - text_length; document.getElementsByClassName("character-count")[i].innerHTML = "Character count:" + text_length + "/" + text_max; }; }(i); } 

 <textarea type="text" class="input-content"></textarea> <p class="character-count"></p> 

Answer 2

The issue is that when you are binding the keyup function, you are using i as an index for the character-count element. But when you do press a key, i is undefined at that point and so there is no index. You could do it like this, by setting an attribute (I used name ) and when you do press a key, get that attribute and use it as an index.

 textareas = document.getElementsByClassName("input-content"); charCounts = document.getElementsByClassName("character-count"); for (var i = 0; i < textareas.length; i++) { textareas[i].setAttribute("name", i); textareas[i].onkeyup = function() { var text_max = 99; var text_length = this.value.length; var text_remaining = text_max - text_length; charCounts[this.getAttribute("name")].innerHTML = "Character count: " + text_length + "/" + text_max; } } 

 textarea { height: 300px; width: 600px; resize: none; } 

 <textarea class="input-content"></textarea> <p class="character-count"></p> 

Answer 3

You should wrap your textareas in a group so that you don't have to rely on siblings ...

Fiddle here: https://jsfiddle.net/hntmxLxu/

window.addEventListener('load', function () {
    var groups = document.querySelectorAll(".textarea-group");

    function attachListener(group) {
        group.querySelector('textarea').addEventListener('keyup', function () {
            group.querySelector('.textarea-group--characters').innerHTML = this.value.length;
        });
    }

    for (var i = 0; i < groups.length; ++i) {
        attachListener(groups[i]);
    }
});

And the HTML ...

<div class="textarea-group">
    <textarea cols="30" rows="5"></textarea>
    <p class="textarea-group--characters"></p>
</div>

<div class="textarea-group">
    <textarea cols="30" rows="5"></textarea>
    <p class="textarea-group--characters"></p>
</div>