How do I display Number of SMS initial as 1 if chars are =< 160?

Question

I have a jquery code which I want to show current number of characters being typed, remaining characters and also number of eg SMS. value between 0 and 160 is 1 SMS, any value above that and less that 321 is tow SMS. the value above 160 print 2 sms to the document but the initial value never change to 1. It's always zero. How do I get this right? Here is the jquery code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    var text_max = 481;

    $('#textarea_feedback').html(text_max + ' characters remaining');

    $('#textarea1').keyup(function() {
    	
        var text_length = $('#textarea1').val().length;

        var cur = text_length;

        var text_remaining = text_max - text_length;
        

        $('#textarea_feedback').html(text_remaining + ' characters remaining');

        $('#textarea_cur').html(cur + ' current characters');

         var sms = 1;

         $('#smsNum').html(sms + ' SMS');
          
          if(cur <= 160) {

    	    $('#smsNum').html(sms);

          }if(cur >= 161) {

    	    $('#smsNum').html(sms += 1 );

         }else{

         	$('#smsNum').html(sms -= 1 );
         }

    });

});

</script>

The HTML code:

<span id="textarea_cur"></span>

 <div id="smsNum"> SMS </div>

   <textarea id="textarea1" rows="5" cols="40" maxlength="482" >

   </textarea>

 <span id="textarea_feedback">

</span>

Answer 1

if(cur >= 161) { $('#smsNum').html(sms += 1 ); }

this will only give you 2 sms no matter how much you increase character count after 160, because you are not calculating number of sms, just make your sms = cur/160

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    var text_max = 481;

    $('#textarea_feedback').html(text_max + ' characters remaining');

    $('#textarea1').keyup(function() {
    	
        var text_length = $('#textarea1').val().length;

        var cur = text_length;

        var text_remaining = text_max - text_length;
        

        $('#textarea_feedback').html(text_remaining + ' characters remaining');

        $('#textarea_cur').html(cur + ' current characters');

         var sms = parseInt(cur/160);

         $('#smsNum').html(sms + ' SMS');


    });

});

</script>

The HTML code:

<span id="textarea_cur"></span>

 <div id="smsNum"> SMS </div>

   <textarea id="textarea1" rows="5" cols="40" maxlength="482" >

   </textarea>

 <span id="textarea_feedback">

</span>

Answer 2

You could use Math.ceil of the division by 160.

sms = Math.ceil(cur / 160)

$(document).ready(function() {
    var text_max = 481;
    $('#textarea_feedback').html(text_max + ' characters remaining');
    $('#textarea1').keyup(function() {
        var text_length = $('#textarea1').val().length,
            cur = text_length,
            sms = Math.ceil(cur / 160),
            text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
        $('#textarea_cur').html(cur + ' current characters');
        $('#smsNum').html(sms + ' SMS');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="textarea_cur"></span>
<div id="smsNum"> SMS </div>
<textarea id="textarea1" rows="5" cols="40" maxlength="482"></textarea>
<span id="textarea_feedback"></span>