Next

The idea!

A textarea accepts text input from the keyboard.  We will add a feature to this textarea that provides an approximate word count for the user input.  

To do this successfully, you'll need to:

  • Create your own Javascript file in the "js" directory of the folder "yourNameWEB2JS". You have already created this directory in the exercise of submodule 6.1. Call it "countsTheWords.js".
  •  Add a <script> tag to the page at the bottom that loads your new js file.
  • In your js file:
    • Use document.getElementById() to get the textarea element from the page. You'll need its id, which you can find on the HTML page.
    • Write an event handler function that runs every time someone types in the textarea. It will look something like this:
      myTextareaElement.onkeyup = function(){
          /* your code goes here*/
      }
    • You'll want to access the .value property of the textarea to get the contents of the box as a String
    • Use string.split() to divide the string (at word boundaries) into an array of Strings
    • Count the elements in the array. This will be (roughly) the number of words in the box
    • Write that value into the HTML element that looks like this: <span id="wordcount"></span>
Next