Total amount of words in all textareas

I'm trying to count the amount of words that the user types in each textarea and add them up and show it to the user as they type I have this so far:

$("[class^='count[']").bind('keyup click blur focus change paste', function() {

    sum = 0;

        $("[class^='count[']").each(function() {

            var Words = jQuery.trim($(this).val()).split(' ').length;

            sum += Number(Words);

            if($(this).val() === '') { sum = 0; }

            $('#maxwords').children('span').text(sum);



        });



});

and here is my HTML:

<ul id="forms">

            <li><textarea name="PresentationAbstract1"  id="PresentationAbstract1"style="width:700px"></textarea></li>

            <li><textarea name="PresentationAbstract2"  id="PresentationAbstract2"style="width:700px"></textarea></li>

            <li><textarea name="PresentationAbstract3"  id="PresentationAbstract3"style="width:700px"></textarea></li>


            <li id="maxwords">Total words (<span>0</span>)</li>
        </ul>

However the problem is that this code doesn't output anything until you get to the last textarea which in this case is the 3rd one and as soon as you click on the last textarea it calculates the amount of words and output it.

Here is the URL to the project it needed: http://www.meetingproceedings.com/harvester2/wordcount.html. Any ideas would be appr开发者_如何学编程eciated.

There are a few things you can improve with the code, but the thing that stuck out the most was that $('#maxwords').children('span').text(sum); was inside your .each() iteration. This will make your code write your the word count every time the number of words in a textarea was counted. And then there's the if($(this).val() === '') { sum = 0; } line, which resets the word count if there was nothing inside the textarea (that's why the word count only "output" to the span when writing on the third textarea).

Try this code instead:

$(function() {

    var countWords = function () {
        var sum = 0;
        $("textarea").each(function() {

            var words = $(this).val().split(' ');
            $.each(words, function(i, v) {
                if ($.trim(v) !== '') {sum++;}
            });

        });

        $('#maxwords span').text(sum);
    };

    // this binds our counting function to the textareas
    $("textarea").bind('keyup click blur focus change paste', countWords);

    // let's run this on document ready
    countWords();

});

It's an O(n^2) algorithm (or rather an O(nm)?), but it correctly checks for repeated whitespaces. You might be better off trying to match against a regular expression to get the complexity down a bit.

This is working on my jsFiddle here.

EDIT

Updated the solution to also run the counting function on document ready. Alternatively, you can also add the ready handler to the textarea bind (i.e. $("textarea").bind('ready keyup click blur focus change paste', countWords)) instead of calling the function itself, and that should also bubble up to the document ready handler, but I just prefer to write it out so that it's clear.

Why do you have this line? Try removing it.

if($(this).val() === '') { sum = 0; }

It's causing you to reset the sum to zero if you encounter an empty field, which you always will until all fields after a filled field have content.

$("#form textarea").live('KeyUp', function(){
var sum = 0;
$("#form textarea").each(function(){
   sum+= $(this).val().split(' ').length;

});
//put sum in your span
});

if you want it to be real time you got to work on keyup event.