CODEWITHSUNDEEP
javascriptjquery
trying_hal9000
trying_hal9000

Reputation: 4403

Javascript error: Error: ta is not defined

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>

Upvotes: 1

Views: 212

Answers (5)

Jimmy
Jimmy

Reputation: 37081

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);
  });
});

Upvotes: 2

nnnnnn
nnnnnn

Reputation: 150040

Your variable ta must not be defined. I assume it should be defined to refer to the text area in question, so add this on the line before:

var ta = $("#theIdOfYourTextareaGoesHere");

Then the code run by your set Interval will have a reference to the text area so it can get its length.

Upvotes: 1

miguel.camba
miguel.camba

Reputation: 1827

This is an invalid JS statement. Use:

setInterval(function(){ 
  $("#counter span").text(/* whatever that retieves a string*/) 
}, 350);

I have no idea how do you need to calculate the text, but que setTimeout part works lika that

Upvotes: 1

Keith.Abramo
Keith.Abramo

Reputation: 6955

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

I'm not sure what 350-ta is so I assumed it was an id... I put your set Interval logic in a callback function so it was more readable. Also .val() needs to be called against a query object

If 350-ta is supposed to be a calculation where ta is a string value then you might be looking for 350 - ta.length

Upvotes: 1

Brian Mains
Brian Mains

Reputation: 50728

What is 350-ta - this isn't supported as a valid value in this construct, wrap quotes around it as "350-ta", but then that won't work with val, so if this is an ID, do $("350-ta").

Upvotes: 1

Related Questions