O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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", // ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required