8.2.3 Button

The pen below also makes use of the select element (three of them, actually), but unlike the previous sample, the script’s main logic isn’t carried out until a button is clicked. The button is created as an HTML button element near the bottom of the HTML block (line 44), and as seen in prior samples, is assigned an id. As in the previous sample, an event listener is defined (line 105 of the JS block). In this case, the listener is set up on the button’s click event. References to the three select elements are established immediately after the addition of the event listener; they are then used to retrieve the selected options within the doQuery() function on line 132.

See the Pen L8 - HTML button example by Jim Detwiler (@jimdetwiler) on CodePen.

This example is based on an Esri sample that has since been updated to use Calcite components (discussed later in the lesson) in place of the HTML select and button elements. See the newer sample here.