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