User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 299

attribute using the getElementById() method. Update script.js to look like
this:
// JavaScript variables used to hold references to HTML
elements
var video;
var control_button;
var control_label;
var control_graphic;
// initialization function runs when the page has

loaded
function init() {
video = document.getElementById("my_video");
control_button = docu-

ment.getElementById("control_button");
control_label = docu-

ment.getElementById("control_label");
control_graphic = docu-

ment.getElementById("control_graphic");
control_button.onclick = playVideo;

}

window.onload = init; // runs the init function when the
page has finished loading
Note Classes instead of IDs could be used for all the elements, and the docu-
ment.getElementByClassName() function could have been used to automatic-
ally enable functionality for multiple video controls on one page, but this would make
the code a bit more complex, so for brevity's sake IDs have been used.

The last line in the init() function calls another function when the button control is
clicked. This function is named playVideo() . Go ahead and add it to script.js :
…
function playVideo() {
control_graphic.className = "pause";
control_button.onclick = pauseVideo;
control_button.title = "Pause";
control_label.textContent = "Pause";