HTML/JS Popup Boxes and Redirect

1. Create 2 html pages and name them page1 and page2.
2. In page1, create an anchor tag with content “Go to page 2”.
3. When the mouse clicks on “Go to page 2”, it should pop up a message box.
4. The message box queries “Are you sure?”. If a user clicks on “Ok”, then redirect to page 2, else stay on page1.

Create 2 html pages and name it page1 and page2.

If you are a Mac user, use ‘touch’ command to create new/empty files.

touch page{1,2}.html

In page1, create an anchor tag with content “Go to page 2”.

<a> Go to page 2 </a>

When the mouse clicks on “Go to page 2”, it should pop up a message box.

1. Add event listener

<a onclick=”pop()”> Go to page 2</a>

2. Add event handler

<script type=”text/javascript”>

function pop() {

// Pop up a message box

}

</script>

Question: Which popup message box should we use?

Alert Box: Make sure information come though to the user.

Confirm Box: Used to verify or accept something, when confirm box pops up, the user have to click “Ok” or “Cancel” (True or False) to proceed.

Prompt Box: Often use to request an input from user.

The message box queries “Are you sure?”. If a user clicks on “Ok”, then redirect to page 2, else stay on page1.

Confirm Box is the best fit in this case.

1. Add “id” to our anchor tag;

<a id=”go” onclick=”pop()”> Go to page 2</a>

2. Add message box to our event handler.

function pop() {

if (confirm(“Are you sure?”)) {

var a = document.getElementById(“go”);

a.href = “./page2.html”;

}

}

Thank you!