HTML and CSS Reference
In-Depth Information
Notice that all three input elements have the same name. This is what defines the group of buttons of
which only one may be selected. In this case, the markup creates an array called
level
. The
getwalls
function will be shown in full in the next section. It is similar to the function in the all-in-one scrip t.
However, in this case, the name of the
localStorage
item is determined from the radio buttons. The code
is
for (i=0;i<document.gf.level.length;i++) {
if (document.gf.level[i].checked) {
lsname= document.gf.level[i].value+"maze";
break;
}
}
The
for
loop iterates over all the input items. The
if
test is based on the
checked
attribute. When it
detects a true condition, the variable
lsname
is constructed from the value attribute of that item, and the
break;
statement causes execution to leave the
for
loop. If you want your radio buttons to start with
one of the items checked, use code like this:
<input type="radio" value="easy" name="level" checked />
or
<input type="radio" value="easy" name="level" checked="true" />
Building the application and making it your own
Now lets take a look at the coding for the maze applications, first the all-in-one script and then the second
script of the two-script version.
Table 7-2 shows the functions in the script for creating, saving, and retrieving, and traveling the maze.
Notice that much of the invoking of functions is done through event handling:
onLoad
,
onSubmit
,
addEventListener
calls. These do not invoke the functions directly or immediately, but set up the call to
be made when the indicated event occurs.
Table 7-2
.
Functions in the Maze Application
Function
Invoked By / Called By
Calls
init
drawall
Invoked by action of onLoad in body tag
draw
method for
Wall
s and
for token:
drawtoken
and
drawAline
drawall
init
startwall
stretchwall
getkeyAndMove
getwalls
Token
var
statement declaring
mypent
Wall
startwall
