Results 1 to 5 of 5

Thread: Word Count isn't counting

  1. #1
    New Registered User dreadingjs's Avatar
    Join Date
    Mar 2009
    Posts
    38

    Question Word Count isn't counting 9 Nov 2010 @ 01.24

    Hi All,

    I am working on a project for javascript. I did all the coding on the external stylesheet but it's not coming up in my htm sheet. If anyone has an idea of what can fix this so the count appears as 0/500, I would be forever grateful.

    Thanks,

    Dreadingjs

    Javascript File

    Code:
    /*
       //Filename: comments.js
    
    
       Global Variables:
      
       maxlength
          The maximum length allowed in the textarea box
    
       Functions List:
    
       init()
          Initializes the contents of the Web page. Creates
          event handlers for the keypress and keyup events.
    
       countText()
          Returns the number of a non-whitespace characters
          in the textarea box.
    
       checkLength(e)
          Verifies the number of non-whitespace characters
          in the textarea box is less than maxlength. Keeps
          user from entering a character that would exceed
          maxlength
    
       updateCount(e)
          Updates the count of characters in the wordcount
          box.
          
    */
    var maxLength= 500;
    window.onload = init;
    
    function init() {
        var commentBox = document.getElementById("comment");
        var countBox = document.getElementById("wordcount"); 
        countBox.value = "0/" + maxLength;
        commentBox.onkeypress = checkLength;
        commentBox.onkeyup = updateCount;
    }
    
    function countText() {
        var commentBox = document.getElementById("comment");
        var commentregx = /\s/g;
        var commentText = commentBox.value.replace(commentregx, "");
        return commentText.length
        }
        
    function checkLength(e) {
        var evt = e || window.event;
        
        if (countText < maxLength) {
        return true;    
        } 
        else if (evt.keyCode == 8 || evt.keyCode ==46) {
            return true;    
        }    
        else return false;    
    }
    
    function updateCount {
        var countBox = document.getElementById("wordcount");
        var currentLength = countText();
        countBox.value = currentLength + "/" + maxLength;
        
        if (currentLength < maxlength) {
            countBox.style.color = "black";
            countBox.style.bgcolor = "white";
        } else {
            countBox.style.color = "white";
            countbox.style.bgcolor = "red";
        }
        
        
    }
    HTML Code
    HTML Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!-- 
       
       Filename:         bookforum.htm
       Supporting files: bw.css, bwlogo.jpg, comments.js
    -->
       <title>Online Bookworms Public Formum</title>
       <link href="bw.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
       <form id="forumForm" action="">
       <div id="page">
          <h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" /></h1>
    
          <ul id="menu">
             <li><a href="#">Home</a></li>
             <li><a href="#">Reviews</a></li>
             <li><a href="#">Forums</a></li>
             <li><a href="#">Book Swaps</a></li>
             <li><a href="#">OBW Store</a></li>
             <li><a href="#">Author's Corner</a></li>
             <li><a href="#">My Account</a></li>
          </ul>
    
          <ul id="menu2">
             <li><a href="#">Comments on this Title</a></li>
             <li><a href="#">Reviews of this Title</a></li>
             <li><a href="#">Order this Title from OBW</a></li>
             <li><a href="#">Find a Book Swap</a></li>
    
             <li class="newgroup"><a href="#">Other Books by this Author</a></li>
             <li><a href="#">Other Books in this Series</a></li>
             <li><a href="#">Recommended Books in this Genre</a></li>
    
             <li class="newgroup"><a href="#">My Reading List</a></li>
             <li><a href="#">Review a Book</a></li>
             <li><a href="#">Join a Discussion</a></li>
             <li><a href="#">Post to a Forum</a></li>
             <li><a href="#">My Mail</a></li>
             <li><a href="#">My Posts</a></li>
             <li class="newgroup"><a href="#">Reading Recommendations</a></li>
             <li><a href="#">Books of the Month</a></li>
             <li class="newgroup"><a href="#">Tech Support</a></li>
          </ul>
    
          <div id="forum">
             <h2>Post Captain</h2>
             <h3>by <a href="#">Patrick O'Brian</a></h3>
             <h4>W.W. Norton &amp; Company, Inc.<br />
                 500 Fifth Avenue, New York, N.Y. 10110<br />
                 ISBN: 0-393-30706-9<br />
                 &copy; Patrick O'Brian 1972
             </h4>
             <h4><b>Genre: </b><a href="#">Historical Fiction</a></h4>
             <p>The second novel in Patrick O'Brian's popular series of
                adventures involving <a href="#">Captain Jack Aubrey</a> and 
                <a href="#">Doctor Stephen Maturin</a> finds the pair
                dealing with the onset of war in 1803 after the breaking of
                the Peace of Amiens. Eager to return to the fight, Aubrey escapes 
                from France to return to Britain, only to be faced with the
                prospect of years served in debtors' prison at the hands of his
                creditors and their agents. Meanwhile, Maturin must negotiate the
                more daunting rocks and shoals of love and romance without
                endangering his friendship with Aubrey.
             </p>
             <fieldset id="commentField">
                <label id="commentLabel" for="comment">
                   Comment on this title (comments limited to 500 characters)
                </label>
                <textarea id="comment" rows="" cols=""></textarea>
                <label id="wordcountLabel" for="wordcount">
                   Character Count:
                   <input type="text" id="wordcount" readonly="readonly" value="0/250" />
                </label>
                <input type="submit" value=" Submit Comment " id="subbutton" />
             </fieldset>
          </div>
    
       </div>
       </form>
    </body>
    
    </html>
    Last edited by Jason; 9 Nov 2010 at @ 07.28. Reason: Code Tags!
      Reply With Quote

  2. #2
    Senior Member Jason's Avatar
    Join Date
    Dec 2008
    Posts
    911

    Default 9 Nov 2010 @ 07.28

    Some people eat breakfast. Some people pick apart other peoples code.

    Error One.
    Code:
    function updateCount {
    // Should Be
    function updateCount() {
    Error Two.
    Code:
    if (currentLength < maxlength) {
    // Should Be
    if (currentLength < maxLength) {
    Error Three
    Code:
    if (countText < maxLength) {
    // Should Be
    if (countText() < maxLength) {
    A point about the final error there. If you leave off the (), the function will be executed. If you add them the function will return a value.

    My code Sample
    HTML Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!-- 
    
    Filename: bookforum.htm
    Supporting files: bw.css, bwlogo.jpg, comments.js
    -->
    <title>Online Bookworms Public Formum</title>
    <link href="bw.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    var maxLength= 500;
    window.onload = init;
    
    function init() {
    var commentBox = document.getElementById("comment");
    var countBox = document.getElementById("wordcount"); 
    countBox.value = "0/" + maxLength;
    commentBox.onkeypress = checkLength;
    commentBox.onkeyup = updateCount;
    }
    
    function countText() {
    var commentBox = document.getElementById("comment");
    var commentregx = /\s/g;
    var commentText = commentBox.value.replace(commentregx, "");
    return commentText.length
    }
    
    function checkLength(e) {
    var evt = e || window.event;
    if (countText() < maxLength) {
    return true; 
    } 
    else if (evt.keyCode == 8 || evt.keyCode ==46) {
    return true; 
    } 
    else return false; 
    }
    
    function updateCount() {
    var countBox = document.getElementById("wordcount");
    var currentLength = countText();
    countBox.value = currentLength + "/" + maxLength;
    
    if (currentLength < maxLength) {
    countBox.style.color = "black";
    countBox.style.bgcolor = "white";
    } else {
    countBox.style.color = "white";
    countbox.style.bgcolor = "red";
    }
    
    
    }commentText
    
    </script>
    </head>
    
    <body>
    <form id="forumForm" action="">
    <div id="page">
    <h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" /></h1>
    
    <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">Forums</a></li>
    <li><a href="#">Book Swaps</a></li>
    <li><a href="#">OBW Store</a></li>
    <li><a href="#">Author's Corner</a></li>
    <li><a href="#">My Account</a></li>
    </ul>
    
    <ul id="menu2">
    <li><a href="#">Comments on this Title</a></li>
    <li><a href="#">Reviews of this Title</a></li>
    <li><a href="#">Order this Title from OBW</a></li>
    <li><a href="#">Find a Book Swap</a></li>
    
    <li class="newgroup"><a href="#">Other Books by this Author</a></li>
    <li><a href="#">Other Books in this Series</a></li>
    <li><a href="#">Recommended Books in this Genre</a></li>
    
    <li class="newgroup"><a href="#">My Reading List</a></li>
    <li><a href="#">Review a Book</a></li>
    <li><a href="#">Join a Discussion</a></li>
    <li><a href="#">Post to a Forum</a></li>
    <li><a href="#">My Mail</a></li>
    <li><a href="#">My Posts</a></li>
    <li class="newgroup"><a href="#">Reading Recommendations</a></li>
    <li><a href="#">Books of the Month</a></li>
    <li class="newgroup"><a href="#">Tech Support</a></li>
    </ul>
    
    <div id="forum">
    <h2>Post Captain</h2>
    <h3>by <a href="#">Patrick O'Brian</a></h3>
    <h4>W.W. Norton &amp; Company, Inc.<br />
    500 Fifth Avenue, New York, N.Y. 10110<br />
    ISBN: 0-393-30706-9<br />
    &copy; Patrick O'Brian 1972
    </h4>
    <h4><b>Genre: </b><a href="#">Historical Fiction</a></h4>
    <p>The second novel in Patrick O'Brian's popular series of
    adventures involving <a href="#">Captain Jack Aubrey</a> and 
    <a href="#">Doctor Stephen Maturin</a> finds the pair
    dealing with the onset of war in 1803 after the breaking of
    the Peace of Amiens. Eager to return to the fight, Aubrey escapes 
    from France to return to Britain, only to be faced with the
    prospect of years served in debtors' prison at the hands of his
    creditors and their agents. Meanwhile, Maturin must negotiate the
    more daunting rocks and shoals of love and romance without
    endangering his friendship with Aubrey.
    </p>
    <fieldset id="commentField">
    <label id="commentLabel" for="comment">
    Comment on this title (comments limited to 500 characters)
    </label>
    <textarea id="comment" rows="20" cols="20"></textarea>
    <label id="wordcountLabel" for="wordcount">
    Character Count:
    <input type="text" id="wordcount" readonly="readonly" value="0/250" />
    </label>
    <input type="submit" value=" Submit Comment " id="subbutton" />
    </fieldset>
    </div>
    
    </div>
    </form>
    </body>
    
    </html>
      Reply With Quote

  3. #3
    New Registered User dreadingjs's Avatar
    Join Date
    Mar 2009
    Posts
    38

    Default 9 Nov 2010 @ 16.14

    This is very helpful Jason. It made all the difference. The only thing that I'm not seeing is the background change from white to red when I go over 500 characters. Do I need to write the else statement differently?
      Reply With Quote

  4. #4
    Senior Member Jason's Avatar
    Join Date
    Dec 2008
    Posts
    911

    Default 12 Nov 2010 @ 03.56

    I assume this still needs fixing.

    Add this somewhere.
    Code:
    <style>
        .counter { background:#FFF; color:#000; }
        .counter-over { background:#F00; color:#FFF }
        </style>
    Change...
    Code:
    if (currentLength < maxLength) {
    countBox.style.color = "black";
    countBox.style.bgcolor = "white";
    } else {
    countBox.style.color = "white";
    countbox.style.bgcolor = "red";
    }
    to..

    Code:
    if (currentLength < maxLength) {
    countBox.className = "counter";
    } else {
    countBox.className = "counter-over";
    }
    Using vanilla JavaScript to manipulate CSS often leads to problems, its far simpler to play with the className and keep the CSS separate.
      Reply With Quote

  5. #5
    New Registered User dreadingjs's Avatar
    Join Date
    Mar 2009
    Posts
    38

    Default 12 Nov 2010 @ 13.52

    It worked perfectly. I was trying document.GetElementByID but this worked perfectly. Thank you Jason. Have a great weekend.
      Reply With Quote

Similar Threads

  1. Facebook trademarking the word 'Face'
    By Jason in forum Coffee House
    Replies: 2
    Last Post: 24 Nov 2010, @ 17.28
  2. Play embedded sound in a WORD document (DOCX)?
    By cena2020 in forum Imagery, Graphics & Typography
    Replies: 0
    Last Post: 19 Jun 2010, @ 08.22
  3. Replies: 6
    Last Post: 14 Aug 2009, @ 17.30

Tags for this Thread

Posting Permissions

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