Question

This is difficult to track down for me as a JS newbie.

I am writing a simple (?) Script that shows me under a textarea (which is meant for writing SMS messages) how many characters the current SMS has left and how many SMS I have written so far.

I have the following JavaScript in my header:

<script type='text/javascript'>
    function CheckCount(text, length) {
        var MaxLength = new Number(length);
        messages = Math.ceil(((text.value) ? text.value.length : 0) / 160);
        remaining = messages * 160 - (((text.value) ? text.value.length : 0) % (messages * 160) || messages * 160);
        if (text.value.length == 0) { messages = 1; remaining = 160; }
        document.getElementById('messages').innerText = messages + ' SMS';
        document.getElementById('remaining').innerText = remaining + ' Characters remaining';
    }
</script>

In the body of the website I put this:

<textarea name="sms_text" cols="35" rows="5" onKeyUp="javascript:CheckCount(this,4000);" onChange="javascript:CheckCount(this,4000);"></textarea>
<p style="margin-left:174px">
    <span id="remaining">160 Characters remaining</span> |
    <span style="clear:both" id="messages">1 SMS</span>
</p>

This works fine in Opera, Safari and Chrome. Firefox and IE have their issues.

Please don’t beat me too much. I am just starting with JavaScript and after a day of tedious searching I cannot get to the solution. 🙂

Answer 1

You don’t need to include javascript: in your textarea handler attributes:

While the above is true, your problem is caused by the use of innerText. Changing to innerHTML works in FireFox.

http://jsfiddle.net/ZTRFA/1/

And to make it work in IE8 it is necessary to declare messages and remaining. I also removed the redundant line var MaxLength = new Number(length);.

http://jsfiddle.net/ZTRFA/2/

function CheckCount(text, length) {
       var messages = Math.ceil(((text.value) ? text.value.length : 0) / 160);
       var remaining = messages * 160 - (((text.value) ? text.value.length : 0) % (messages * 160) || messages * 160);
       if (text.value.length == 0) { messages = 1; remaining = 160; }
       document.getElementById('messages').innerHTML = messages + ' SMS';
        document.getElementById('remaining').innerHTML = remaining + ' Characters remaining';
}