Lesson 157 – Complete 2020 Web Development Bootcamp

Lesson 157 – Adding an Event Listener to a Button

The addEventListener() function has two parameters –

  • a type – which is a case sensitive string of the event type to listen to – this link sets out the different event types.
  • a listener – this is usually a Javascript function that will be called when the event type is detected.

This is an example of an event listener added to a button. When the button is clicked, an alert will be displayed to the user.

document.querySelector("button").addEventListener("click", handleClick);

function handleClick() {
	alert("I got clicked!");
}

When adding a function as the listener in an addEventListener() function it is important to only use the name of the function and not the parenthesis. So you would use –

.addEventListener("click", handleClick);

and not –

.addEventListener(“click”, handleClick());

If you add the parenthesis then the function will run as soon as it is read and it will not wait for the event type (in this case “click”) to happen.

Instead of writing the code as –

document.querySelector("button").addEventListener("click", handleClick);

function handleClick() {
	alert("I got clicked!");
}

It is more common to use an anonymous function as the listener instead of writing a named function and then using that named function as the listener.

Using an anonymous function as the listener, the code looks like this –

document.querySelector("button").addEventListener("click", function() {alert("I got clicked!");});

The challenge given in this lesson is to add an event listener to all 7 buttons in the html file so that no matter which button is clicked the user will receive an alert message.

This is my solution –

var buttons = [].slice.call(document.getElementsByTagName("button"));

buttons.forEach(function (element) {
    element.addEventListener("click", function(){
        alert("It worked!");
    });
});

In researching how to iterate through an array of HTML elements and add an event listener to each item in the array, I found this great article on Go Make Things which gave me two more ways to do the same thing.

The additional ways are –

var buttons = Array.prototype.slice.call(document.getElementsByTagName("button"));

buttons.forEach(function (element) {
    element.addEventListener("click", function(){
        alert("It worked!");
    });
});

and

var buttons = Array.from(document.getElementsByTagName("button"));

buttons.forEach(function (element) {
    element.addEventListener("click", function(){
        alert("It worked!");
    });
});

This is the solution given in the lesson –

var numberOfDrumButtons = document.getElementsByClassName("drum").length;

for (var i = 0; i < numberOfDrumButtons; i++) {
	document.getElementsByClassName("drum")[i].addEventListener("click", function () {
		alert("It worked!");
	});
}

The given solution uses a for loop to loop through the buttons with a class name of “drum” and adds an event listener to each button. When each button is clicked it displays an alert message to the user.

In the given solution, the buttons were selected using –

document.querySelectorAll(".drum")

For some reason that I can’t figure out yet “querySelectorAll” is not working for me in these challenges. I have been having to use “getElementsByTagName” or “getElementsByClassName” to get the code to work.