Question

I am new to JavaScript and I am trying to add a character counter to a text field using this code:

$(function(){
  $('.txtclass').keypress(function(){
      ta = $(this);
      if(ta.val().length >= 350){
          ta.val( ta.val().substr(0, 350) );
      } else {
          $("#counter span").text(350-ta.val().length);
      }
  });
});

setInterval('$("#counter span").text(350-ta.val().length);', 350);

I get that JavaScript error: "Error: ta is not defined" and points me to that specific line in my code.

Any insight into whats happening and how to fix it would be really appreciated as I’d like to add more counters for other text-fields into the website elsewhere.

Edit: here’s the html for the counter

 <div id="counter"><span>350</span> characters remaining.</div>
    </div>

Answer 1

It means just what it says. The value being passed to the text method is the result of the expression 350 - ta.va().length. The variable ta has not been defined at the point this code is being run.

A few things to note before my proposed solution.

1. You are correct in responding to the keypress event to truncate the user input, but there is no need to use an interval to update the count – just update it in the event handler.
2. Don’t put the function passed to setInterval in quotes. This causes it to be run through eval, which is both slower and less secure.
3. Save jQuery objects in variables outside of the event handler so the same objects can be used each time the handler is invoked. This uses less memory and should be a tiny bit faster.

Here’s how I would implement this:

$(function () {
  var ta = $(".txtclass"),
      counter = $("#counter span");

  ta.keypress(function () {
    var taValue = ta.val();

    if (taValue.length >= 350) {
      taValue = ta.val(taValue.slice(0, 350)).val();
    }

    counter.text(taValue.length);
  });
});