CODEWITHSUNDEEP
jqueryhtml
trying_hal9000
trying_hal9000

Reputation: 4403

jQuery: JavaScript error "Error: ta is not defined"

I'm new to jQuery and I was trying add a character counter to a text field using this code:

$(function(){
  $('.content').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);

html (with rails code)

<div>
<%= f.label :content, "Content" %><br /> 
<%= f.text_area :content, :class => "content" %><br />
<div id="counter"><span>350</span> characters remaining.</div>
</div>

I keep getting the JavaScript error:

"Error: ta is not defined"

and points me to this specific line in my code.

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

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.

Thanks.

Upvotes: 0

Views: 258

Answers (4)

Acaz Souza
Acaz Souza

Reputation: 8631

Probably you are making your character counter in the wrong way:

You can not let a setInterval function running all the time to count the characters in the field, you should do this:

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

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

Upvotes: 0

Matthew Cox
Matthew Cox

Reputation: 13672

The reason you are getting that error is because you haven't defined ta

change this:

ta = $(this);

to this:

var ta = $(this);

also, pass the code you want excuted into the setInterval in an anonymous function like so:

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

However, there is still one other issue. The scope of the anonymous function that setInterval calls won't include ta ... therefore, you wont be able to reference ta.val().length. You will need to declare ta outside of the document ready and set it inside as you are already doing so that the variable is properly scoped.

EDIT:

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

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

Upvotes: 3

Keith.Abramo
Keith.Abramo

Reputation: 6955

ta does not get defined until the first key press. So before that the interval is going to error. Also you should put the setInterval line in the $() function with the .keypress

$(function(){
  ta = $(".content");

  $('.content').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);
});

However, I'm not sure why you have the setInterval when your keypress event function seems to do all the functionality you want with the countdown.

Upvotes: 1

deepwell
deepwell

Reputation: 20871

ta is not defined until the anon function inside keypress(), therefore you can't use it outside of that function.

You could re-write you code like so:

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

I would recommend you remove the use of setInterval, and instead just update the character count after each keypress. Although, you'll have to account for other cases like pasting text in, etc.

Upvotes: 0

Related Questions