If you had to pick some of the most common things you do on a web page, clicking on links to navigate between pages should be at the top of your list. You probably don't even realize how frequently you click on things to go to a different page. In fact, you probably clicked on a link to get to this very page!
The most common way of creating a link is via the anchor (a) tag:
Here is an example you can play with:
[ go here to see a live example! ]
Getting back to this tutorial, I've broken things out into the following bite-sized sections:
And with that, let's get started!
Let's first start with the foundation - the HTML and CSS that gives your example the structure and look. Create a new HTML page and copy/paste the following into it:
Once you have copied and pasted the above HTML and CSS, go ahead and preview it in your browser to make sure everything works well.
Here is an example of what it looks like on Google Chrome:
Now that you have a working example, before moving on to the next step, let me point out some interesting tidbits from the HTML that you will find relevant for future sections.
What we want to do is navigate to a different page when either the Yes or No button is clicked. Let's look at the markup for our buttons:
Our buttons are, shockingly, of type button. I won't go into too much details of the button element here, but the main thing to note is the id value of each button. The Yes button has an id of yesButton. The No button has an id of noButton.
When we start adding some code, you will see these id values being used.
Inside this script tag, we are going to listen for three events and add three event handlers that correspond to those events.
First, we are going to add an event handler that gets called when our DOM has fully loaded:
We define the setupEvents event handler which will get called when the DOMContentLoaded event is fired. You can learn more about this event and why we use it by reading the Running Scripts at the "Right" Time tutorial.
Inside the setupEvents event handler, we will add the event listeners that will react when our two buttons are clicked. We first need to get a reference to those two buttons:
Once have a reference to our buttons, we can listen for the click event on them and call the appropriate event handler:
The event handlers for yesButton and noButton are yesFunction and noFunction respectively:
Depending on which button you click, the appropriate event handler will get called.
When either the Yes or No buttons are clicked, we want to navigate to a different page. Right now, we have everything setup with our events and event handlers except for the code to do the actual page navigation.
The moment you set the location property, your browser will navigate you to the page you specified.
For our example, we want to take you to the ICanHasCheezburger site if you like kittens or the FailBlog if you don't like them. Our window.open code needs to be added to the yesFunction as well as the noFunction event handlers as shown below:
Once you have added these two lines of code, go ahead and preview your page in your browser. When you click on either the Yes or No button, your browser will navigate to the corresponding page. Yay!
Before calling it a day, let's take a step back and look at why everything works the way it does. If I had to walk through our code and describe what is happening, here is what it would look like:
That's our code, pretty much in a nutshell, explained in English!
Of coursse, as a distraction, I hope you liked the two websites the Yes and No buttons take you when you click on them. This tutorial took twice as long to write because I couldn't stop browsing through LOLCats.