SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member rdyco's Avatar
    Join Date
    Mar 2013
    Location
    US
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with "Word Count" script

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

    HTML Code:
    <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>
    Code:
    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);
    };

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    addEvent( window, 'load', function () 
      {
        'use strict';
        addEvent($('comments'), 'keyup', limitText);
      } );
    Tab-indentation is a crime against humanity.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member rdyco's Avatar
    Join Date
    Mar 2013
    Location
    US
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Let me change that to type

    Code:
    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?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rdyco View Post
    Thanks. Let me change that to type

    Code:
    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/
    Last edited by paul_wilkins; Mar 25, 2013 at 02:52.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member rdyco's Avatar
    Join Date
    Mar 2013
    Location
    US
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. I'm using:
    Code:
    obj.attachEvent('on' + type, fn);
    There was a misplaced comma in the original code that had to be removed. What a mess.

    Before:
    Code:
    if (obj, && obj.addEventListener) {
    After:
    Code:
    if (obj && obj.addEventListener) {
    Thanks a bunch for the fast responses!

  7. #7
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rdyco View Post
    Code:
    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:
    Code:
    function $( id ) 
    {
      'use strict';
    
      var elem = null;
    
      if( typeof id === 'string' ) 
        elem = document.getElementById( id );   
    
      return elem;
    }
    Tab-indentation is a crime against humanity.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    It is not good practice to write a function that doesn't always return a value:
    How about if we simplify things?

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

    Or even simpler:

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

    Or even simpler still?

    Code javascript:
    function $(id) {
        'use strict';
        return document.getElementById(String(id));   
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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:

    Code:
    function $( id )
    {
      var elem = document.getElementById( id );
       
      return elem && elem.id === id ? elem : null;
    }
    Tab-indentation is a crime against humanity.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •