8.2.4 Text Box

8.2.4 Text Box

The pen below shows a simple app that provides the user a text box to enter the name of a hurricane to display on the map.

See the Pen Text box demo by Jim Detwiler (@jimdetwiler) on CodePen.

Some noteworthy aspects of this app:

• A div (id of "paneDiv") is the container for all of the custom UI elements.
• Within that div are an input element of type="text" and a button element.  Both are assigned ids so that they can be accessed in the JS code.
• The input element has its placeholder attribute set to provide a prompt to the user on the sort of entry expected in the box.  This and other input attributes are described at w3schools.
• Line 30 of the JS code establishes a listener for the button's click event, the getTrack() function.
• That function obtains the name entered by the user into the text box by reading its value property on line 37.  
• The storm name is then incorporated into a definitionExpression applied to the FeatureLayer that was created earlier in the code.