word counter Javascript function call

Question

Wanted to have a word counter next to a input textbox on the website

Got it working to show the count when the user click or modify the text but I wanted to load up straight away when the page finish loading.

$(document).ready(function() {

  $("#product_name").change(displayText).keyup(displayText);

function displayText(){
      $("em#counter").text($(this).val().length +' chars'); 
}
});

So I tried this the code below but couldn't get it working and don't know why.

$(document).ready(function() {

    if($("#product_name").length){
           displayText();
    }
  $("#product_name").change(displayText).keyup(displayText);

function displayText(){
      $("em#counter").text($(this).val().length +' chars'); 
}
});

Thanks so much.

We'll need more information to answer your question. Is it throwing an error? — yourdeveloperfriend
– yourdeveloperfriend, Commented Mar 1, 2013 at 6:30

Arun P Johny · Accepted Answer · 2013-03-01 06:34:50Z

2

Try this

if($("#product_name").length){
           displayText();
}
$("#product_name").change(displayText).keyup(displayText);

function displayText(){
      $("em#counter").text($("#product_name").val().length +' chars'); 
}

Demo: Fiddle

Problem was your displayText() call during page load. In displayText you had used $(this) to access the input field, which was working as a event handler. But when you call displayText directly this will point to the window object.

answered Mar 1, 2013 at 6:34

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dipesh Parmar · Accepted Answer · 2013-03-01 06:28:11Z

0

Try .on() with multiple event.

$("#product_name").on({
    change: function() {
        // Handle change event
    },
    keyup: function() {
        // Handle keyup
    }
});

and for "when the page finish loading." use $(window).load(function() { });

answered Mar 1, 2013 at 6:28

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Collectives™ on Stack Overflow

word counter Javascript function call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related