HTML and CSS Reference
In-Depth Information
Displaying Windows Dialog Boxes
• To display an alert dialog box, use the method
alert(
message
)
where
message
is the text displayed by the alert dialog box.
• To display a confirm dialog box, use the method
confirm(
message
)
where
message
is the text displayed by the confirm dialog box. The dialog box returns
a value of
true
if the
OK
button is clicked and
false
if the
Cancel
button is clicked.
• To display a prompt dialog box, use the method
prompt(
message
,
default
)
where
message
is the text displayed by the prompt dialog box and
default
is the
default text string. The dialog box returns the text entered into the dialog box by
the user.
Using a Confirm Dialog Box
Rebecca suggests that the puzzle app display a confirm dialog box before swapping one
puzzle for another. You'll add this command to the swapPuzzle() function by employing
the following
if
structure:
if (confirm(
prompt
)) {
swap puzzle commands
}
Because the
confirm()
method returns a Boolean value, placing the method within an
if
statement causes the command block to be run only when a user clicks the
OK
but-
ton. You'll add this structure to the swapPuzzle() function now.
To create a confirm dialog box:
◗
1.
Return to the
hanjie.js
file in your text editor.
◗
2.
Go to the swapPuzzle() function. Directly after the opening function line, insert the
following
if
statement:
if (confirm(“You will lose all of your work on the puzzle!
Continue?”)) {
◗
3.
Scroll down to the bottom of the swapPuzzle() function. Before the closing curly
brace, insert another curly brace to close off the
if
statement, enclosing the rest
of the commands within a command block.
◗
4.
Indent the lines within the command block three spaces to make your code easier
to read. Figure 13-32 shows the final code of the swapPuzzle() function.
