How To Make Word Count Using HTML JavaScript

Submitted by alpha_luna on Friday, May 29, 2015 - 00:01.
Through this script ,words in paragraphs ,data ,and even whole articles will be counted automatically. How many times did you launch an entire word processor just to find out the number of words of a certain paragraph contains? If you have a site that contains forms, you could also include this script on the page to spare your visitors they had to go through in counting the number of words. You no longer need to waste your time just counting the words a particular site has. This kind of problem can be solve through this tutorial. In this tutorial we are going to learn How To Make Word Count Using HTML JavaScript. So, what is it all about? This is a simple work, but it can help you to your site.

Example:

How To Make Word Count Using HTML JavaScript

*Just click the button name "Calculate" to view the result. Try to edit the context above. To see the output you desire number of words to see.

Directions:

First: Kindly add this code below to the HEAD section of your page.
  1. <style type="text/css">
  2.  
  3. .button_calc {
  4. background:buttonface;
  5. width: 100px;
  6. height: 40px;
  7. font-size: 20px;
  8. cursor:pointer;
  9. }
  10.  
  11. .result_txt {
  12. cursor:no-drop;
  13. width:150px;
  14. height:40px;
  15. text-align:center;
  16. font-size:18px;
  17. color:red;
  18. }
  19.  
  20. .input_txt {
  21. border:1px solid red;
  22. font-size:18px;
  23. }
  24.  
  25. div {
  26. margin-top:50px;
  27. border:1px solid red;
  28. }
  29.  
  30. </style>
*This is for css, and you can customize the design. Second: Kindly copy everything the code below and paste it where you want the script appear.
  1. <form method="POST" name="word_count">
  2.  
  3. <script language="JavaScript">
  4. function countit(){
  5. var formcontent=document.word_count.word_count2.value
  6. formcontent=formcontent.split(" ")
  7. document.word_count.word_count3.value=formcontent.length
  8. }
  10.  
  11. <table border="0" cellspacing="0" cellpadding="0">
  12.     <tr>
  13.                   <td width="100%">
  14.                                 <textarea rows="12" name="word_count2" cols="60" class="input_txt" wrap="virtual">Welcome to Sourcecodester!!! Do you have source code, articles, tutorials, web links, and books to share? You can write your own content here. You can even have your own blog. Submit now.</textarea>
  15.                   </td>
  16.     </tr>
  17.     <tr>
  18.                   <td width="100%">
  19.                                 <div align="left">
  20.                                           <p align="center">
  21.                                                         <input type="button" value="Calculate" onClick="countit()" class="button_calc" />
  22.                                                         <input type="text" name="word_count3" size="20" class="result_txt" disabled />
  23.                                           </p>
  24.                                 </div>
  25.                   </td>
  26.     </tr>
  28.  
  29. </form>
And that's all!!! Just DOWNLOAD the sourcecode, and try it. Enjoy coding...
Tags
word count

Add new comment

About text formats
  • 84 views