HTML and CSS Reference
In-Depth Information
But I haven't applied the three classes shown earlier to anything yet, so what
gives? I'll do this via some simple JavaScript when the Submit button and
<h1>
are
clicked. The JavaScript looks like this:
var submit = document.getElementById(“submit”);
var form = document.querySelector(“form”);
var back = document.getElementById(“back”);
var h1 = document.querySelector(“h1”);
TIP:
querySelector
and
addEventListener
are not sup-
ported by IE versions earlier than version 9. Therefore, for
IE 6-8 support, you'll need to consider using different code.
Here, references to elements are stored on the page in the following variables:
submit
.
The
<input id=
”
submit
”
>
form
.
The
<form>
element
back
.
The back face of the form; the
<div>
with the
#back
attribute
h1
.
The
<h1>
element
Next, I set up two event listeners:
submit.addEventListener(“click”, rotateForm, false);
h1.addEventListener(“click”, formOut, false);
First line.
Adds an event listener to the
submit
variable reference, which
executes the
rotateForm
function when the Submit button is clicked.
Second line.
Adds an event listener to the
h1
variable reference, which
executes the
formOut
function when the
<h1>
element is clicked.
