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. }
   
9. </
   
   script
   
   >
   
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
    
    >
    
27. </
    
    table
    
    >
    
28. 
    
29. </
    
    form
    
    >
    

And that's all!!! Just DOWNLOAD the sourcecode, and try it.
Enjoy coding...

Download