HTML5 Web Application Development By Example Beginner's guide

Time for action – adding a sustain control

Let's go ahead and add a sustain control to the application. We will use a checkbox input control to turn sustain on and off. In our HTML file, we will add a new <div> element with a class of controls under the keyboard to hold our controls:

<div id="main">
    <!-- keyboard not shown... -->
    <div class="controls">
        <label for="sustain">Sustain: </label>
        <input type="checkbox" id="sustain" checked /><br />
    </div>
</div>

We define a label and a checkbox with an id attribute of sustain. We also set it checked by default.

Now let's implement the code for the checkbox in our PianoApp application object. First, we need to add a variable named sustain and set it to true:

function PianoApp() { var version = "6.3", // ...