Element Object Events in Action

Practicing DOM element object click events.

1. Lab: The a element click event.

Lab preview of the a element on click event calling a function.

Objective: Handle the a element click event.

Setup Instructions

Copy all the files from the start-01 folder to practice folder and replace if necessary.

The activity's completed files can be found in the completed folder.

Steps:

Open the event-click-die-roll.html file in your web browser and inspect the 'Click Me' link and the 'Nothing here but us chickens' text.

Open the event-click-die-roll.js file in your code editor. Insert before the following line …

function getDiceRoll(){

… the following function …

function updateResults(){
	console.log('updateResults()');
	var outputEle = document.getElementById("output");
	var dieRoll = getDiceRoll();
	console.log('dieRoll: ', dieRoll);
	outputEle.innerHTML = dieRoll;
}

… and at the end of the file the following …

updateResults();

… and save.

Reload event-click-die-roll.html file in your web browser. Repeat reloading a few times.

In the event-click-die-roll.js file in your code editor and before the following line …

function updateResults(){

… the following …

var rollLinkEle = document.getElementById("roll-link");
rollLinkEle.addEventListener("click", rollLinkClick);
function rollLinkClick(event){
	console.log('rollLinkClick(...)');
	updateResults()
	event.preventDefault();
}

… and save.

Reload event-click-die-roll.html file in your web browser and click the 'Click Me' link a few times.

DIY: Remove the dieRoll variable from the updateResults function but produce the same output.

The solution:

function updateResults(){
	console.log('updateResults()');
	var outputEle = document.getElementById("output");
	var dieRoll = getDiceRoll();
	console.log('dieRoll: ', dieRoll);
	outputEle.innerHTML = dieRoll;
	outputEle.innerHTML = getDiceRoll();
}

2. Lab: DIY responding to the a element click event.

Confucius Says click event lab preview.

Objective: DIY coding to handle the a element click event.

Setup Instructions

Copy all the files from the start-02 folder to practice folder and replace if necessary.

The activity's completed files can be found in the completed folder.

Steps:

Open the confucius-says.html file in your web browser and inspect the 'Get Another Quote' link and the quoted text.
Open the confucius-says.js file in your code editor and inspect.
DIY: Add an event listener to the quote-link element and update the quote element with another random quote.
A function is required to respond to the click event. It can be placed anywhere in the confucius-says.js file.
```
function quoteLinkClick(event){
	console.log("quoteLinkClick()");
	updateQuote();
	event.preventDefault();
}
```
To call the function a click event handler is needed for the quote-link element.
```
var quoteLinkEle = document.getElementById("quote-link");
quoteLinkEle.addEventListener("click", quoteLinkClick);
```
This could be shortened to one line.
```
document.getElementById("quote-link").addEventListener("click", quoteLinkClick);
```
Remember the console.log lines are for learning or debugging purposes only. Remove them before publishing any web pages.