Character Counter is showing a negative number, not initial value

I'm unable to get the character counter to show an initial value.

When you type a something in, it says -1, -3, -4. It starts off at 0,
instead of the maximum amount allowed. I'd prefer it countdown from the
highest amount of characters allowed. 400, 399, 398, etc

$(document).ready(function() {
      var counter, max_length, review_text;
      review_text = $('#body');
      counter = $('#counter');
      max_length = counter.data('maximum-length');
      review_text.keyup(function() {
        counter.text(max_length - ($(this).val().length));
      });
    });

David Williams <lists@ruby-forum.com> writes:

I'm unable to get the character counter to show an initial value.

When you type a something in, it says -1, -3, -4. It starts off at 0,
instead of the maximum amount allowed. I'd prefer it countdown from the
highest amount of characters allowed. 400, 399, 398, etc

$(document).ready(function() {
      var counter, max_length, review_text;
      review_text = $('#body');
      counter = $('#counter');
      max_length = counter.data('maximum-length');
      review_text.keyup(function() {
        counter.text(max_length - ($(this).val().length));
      });
    });

--
Posted via http://www.ruby-forum.com/.

This is a Javascript question, and has nothing to do with Rails.

Nevertheless, I think you need to convert max_length to an integer. If
it is comming off whatever tag has id="counter" and
data-maximum-lenght="400", that is being pulled in as a String. Perhaps
try:

    max_length = parseInt(counter.data('maximum-lenght'));

tamouse m. wrote in post #1180583:

David Williams <lists@ruby-forum.com> writes:

      max_length = counter.data('maximum-length');
      review_text.keyup(function() {
        counter.text(max_length - ($(this).val().length));
      });
    });

This is a Javascript question, and has nothing to do with Rails.

Nevertheless, I think you need to convert max_length to an integer. If
it is comming off whatever tag has id="counter" and
data-maximum-lenght="400", that is being pulled in as a String. Perhaps
try:

    max_length = parseInt(counter.data('maximum-lenght'));

It's giving me Nan when I wrap the parseInt method around the counter.

Check that your spelling of the attribute is correct, note the typo in the example. Also, if you want to be extra-careful (just had to deal with this yesterday) you can go all belt-and-suspenders on it:

    parseInt( 0 + counter.data('maximum-length') )

The leading 0 + won't change the value, but it will force JavaScript to cast an empty string to zero, so you don't get NaN (not a number), which may actually be true, depending on how the parser does with the data-attribute.

Walter

Sorry, left out one more bit here:

  parseInt( 0 + counter.data('maximum-length'), 10 )

The second argument to parseInt forces it to consider the input to be an n-base number, so it won't misinterpret a string 'number' as belonging to a different encoding scheme.

Walter

Walter Davis wrote in post #1180603:

It's giving me Nan when I wrap the parseInt method around the counter.

Check that your spelling of the attribute is correct, note the typo in the

example. Also, if you want to be extra-careful (just had to deal with
this
yesterday) you can go all belt-and-suspenders on it:

   parseInt( 0 + counter.data('maximum-length') )

Sorry, left out one more bit here:

  parseInt( 0 + counter.data('maximum-length'), 10 )

Walter

Is the last argument '10' the maximum amount allowed placeholder number?

Walter Davis wrote in post #1180603:

It's giving me Nan when I wrap the parseInt method around the counter.

Check that your spelling of the attribute is correct, note the typo in the

example. Also, if you want to be extra-careful (just had to deal with
this
yesterday) you can go all belt-and-suspenders on it:

   parseInt( 0 + counter.data('maximum-length') )

Sorry, left out one more bit here:

  parseInt( 0 + counter.data('maximum-length'), 10 )

It's still giving me NaN, you can try the code if you want on a test
html form or text area.

Have you tried inserting
alert( counter.data('maximum-length') )
to see what the value is? then assuming it looks ok
alert (0 + counter.data('maximum-length'))
and
alert( parseInt( 0 + counter.data('maximum-length'), 10 ) )

Colin