For every textarea i create, i want it to have its 'personal word count' on it.

Question

The code below is to appear additional 2 textbox and 1 textarea everytime i click a button.

var x=1;
        var count=0;

        $('body').on('click','#add',function()
        {
            if(count < 6)
            {   
                $('#div').append("<div class='line'><input type='text' name = 'txta"+x+ "' id='txta"+ x +"'><span class =wordtab></span>      <textarea rows='9' onkeyup='countChar2(this)' cols='50' name = 'txtc"+x+ "' id='txtc"+ x +"'></textarea>   <span class =wordtab></span><input style = 'width:50px' type='text' name = 'txtb"+x+"' id='txtb"+ x +"'><span class =wordtab></span><button class='delete' value ='Delete Row'>Delete Row</button></div><div style='margin-left: 750px' id='charNum" + x + "'></div>");
                count++;
                x++;
            }
            else
            alert("Maximum 6 Skills");
        });

        $('body').on('click','.delete',function()
        {
        $(this).closest('.line').remove(); 

        count--;
        });

The below function is the code that i currently have (which i know its wrong) to put in a counter for every textarea that i added in.

        function countChar2(val) 
        {
             var len = val.value.length;
             if (len >= 200) 
             {
             val.value = val.value.substring(0, 500);

            } 
            else 
            {
                var id = "charNum" + x;
                $(id).text((200 - len)+" words left");
            }
        };

So my goal is that everytime i click on the add row and start typing on the textarea, it will show the word count for that particular texarea just right below the textarea box.

http://stackoverflow.com/questions/17909646/counting-and-limiting-words-in-a-textarea?rq=1 or http://stackoverflow.com/questions/23133617/how-to-count-words-in-a-textarea-by-jquery-and-return-that-value?rq=1 — , Jul 11 '16 at 16:05
@RC. my word count works but idk how to append it so that it have an individual ID for every — Samuel, Jul 11 '16 at 16:07
@DavidH. The problem is that the ID has to be unique for the word count but i do not know how to make it unique. I tried using my x variable but dont really know how to apply it — Samuel, Jul 11 '16 at 16:08

score 0 · Answer 1 · answered Jul 11 '16 at 17:23

To get a unique counter added to each textarea, you could append another div to the textarea with a specific class e.g.

Set the HTML structure to something such as:

<textarea></textarea><div class='text-count-area'>Word Count: 0</div>

Add the following JS at the point where each textarea is added e.g. just before 'count++' in your original code (note: this is not the most efficient way of doing this, but this will work easily with your current code):

 // Bind the text area to the keyup event
 $("textarea").on('keyup', function(val) {

    // Simple word count
    var words = this.value.match(/\S+/g).length;

    // Write the word count to the immediate text-count-area div afterwards
    $(this).next(".text-count-area").text("Text count" + words);
 });

The word count is kept simple here for readability, but the logic from other answers (highlighted in the comments) could be implemented at this stage.

A JS Fiddle demo of this working is here.

score 0 · Answer 2 · answered Jul 11 '16 at 17:25

Let see your example:

You add each div by .append method, it's correct
You count input symbols by onkeyup event, it's correct too
All you need is update your countChar2 function because this function has wrong body in that lines:
```
        var id = "charNum" + x;
        $(id).text((200 - len)+" words left");
```

First of all: try to debug your code via developer tools in your favorite browser with breaks in that lines. This step can give your much more and quickly info than posting question in stackoverflow :)

For onkeyup event you should use link to this object instead of id inside your function:

            $(val).parent().find('.words-left').val((200 - len));

This line uses val as a link to textarea object in just appended line. .parent() gives you access to wrapper and find() finds input for words left field. (I've added '.words-left' class to your input, see my fiddler bellow). And this code works in stage of your just added line.

Your code of $('body').click() should be executed, when document is fully loaded and DOM ready. But all your ids that you will create in future doesn't appends that DOM. That's why your delete function works properly - that function uses class selector instead of id.

Proposed by me code doesn't uses id selector because it is not needed. All that needs to me - link to current object in new line, val - what I need for that operation.

BTW: When you implement function that works with objects, such as onkeyup='countChar2(this)', better way to use object as passed variable - var countChar = function(obj) {. Because val is using for scalar values in common way.

You can check my code here https://jsfiddle.net/jo0cd3yr/1/

For every textarea i create, i want it to have its 'personal word count' on it.

2 Answers2