Problems with "Word Count" script

[rdyco]

I can't seem to get any word counting in the code. I start typing but there's no keyboard event triggered. Any ideas?

<form action="#" method="post" id="theForm">
    <div>
        <label for="comments">Comments</label>
        <textarea name="comments" id="comments" maxlength="100" required></textarea>
    </div>
    <div>
        <label for="count">Character Counts</label>
        <input type="text" name="count" id="count" disabled/>
    </div>
    <script src="text.js"></script>
</form>

function $(id) {
    'use strict';
    if (typeof id == 'string') {
        return document.getElementById(id);
    }
}

function addEvent(obj, type, fn) {
    'use strict';
    if (obj && obj.addEventListener) { // W3C
        obj.addEventListener(type, fn, false);
    } else if (obj && obj.attachEvent) { // Older IE
        obj.attachEvent('on' + obj, fn);
    }
}

function limitText() {
    'use strict';
    var comments = $('comments');
    var count = comments.value.length;
    $('count').value = count;

    if (count > 100) {
        comments.value = comments.value.slice(0, 100);
    }

}

window.onload = function () {
    'use strict';
    addEvent($('comments'), 'keyup', limitText);
};

[Logic Ali]

There's nothing wrong, so either you don't have scripts enabled or something unshown is messing it up.
As you're using event listeners, you should be consistent and use one for onload, that way no other script can overwrite it:

addEvent( window, 'load', function () 
  {
    'use strict';
    addEvent($('comments'), 'keyup', limitText);
  } );

[paul_wilkins]

It seems to work in Chrome and other modern web browsers, but with Internet Explorer it doesn't work.

Look at the addEvent function. There's a mistake that has been made in the IE part of the function.

[rdyco]

Thanks. Let me change that to type

obj.attachEvent('on' + obj, fn);

...but I'm not sure what's going on, I still don't see the word count displaying the word increments. How did you guys get it to work? Was the code alter or placed differently? is it html 5?

[paul_wilkins]

Thanks. Let me change that to type

obj.attachEvent('on' + obj, fn);

Are you using that code which you showed above? Because it doesn't seem to be the corrected version.

Here's a jsfiddle with the corrected version of the code.
http://jsfiddle.net/4bf9W/

[rdyco]

Yeah. I'm using:

obj.attachEvent('on' + type, fn);

There was a misplaced comma in the original code that had to be removed. What a mess.

Before:

if (obj, && obj.addEventListener) {

After:

if (obj && obj.addEventListener) {

Thanks a bunch for the fast responses!

[Logic Ali]

function $(id) {
    'use strict';
    if (typeof id == 'string') {
        return document.getElementById(id);
    }
}

It is not good practice to write a function that doesn't always return a value:

function $( id ) 
{
  'use strict';

  var elem = null;

  if( typeof id === 'string' ) 
    elem = document.getElementById( id );   

  return elem;
}

[paul_wilkins]

It is not good practice to write a function that doesn't always return a value:

How about if we simplify things?

function $(id) {
    'use strict';
    if (typeof id !== 'string') {
        id = '';
    }
    return document.getElementById(id);   
}

Or even simpler:

function $(id) {
    'use strict';
    id = (typeof id === 'string') ? id : '';
    return document.getElementById(id);   
}

Or even simpler still?

function $(id) {
    'use strict';
    return document.getElementById(String(id));   
}

[Logic Ali]

How about if we simplify things?

I assumed that 'use strict' would eliminate IE's 'treat name as ID' quirk, but it seems not, so I must continue to advocate my version from tips and tricks:

function $( id )
{
  var elem = document.getElementById( id );
   
  return elem && elem.id === id ? elem : null;
}