JavaScript: Adding EventListeners that Target Multiple Items

Make a new html file, a new css file, and a new javascript file: index.html, styles.css, myscript.js.

In the html file, connect the stylesheet, and connect the javascript file.]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wiring up EventListeners</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
 
<script src="myscript.js"></script>
</body>
</html>

Now, inside the document, add the following Emmet equation and then press TAB:

nav>(button.btn.btn${color$})*10

This will produce 10 buttons:

<nav>
  <button class="btn btn1">color1</button>
  <button class="btn btn2">color2</button>
  <button class="btn btn3">color3</button>
  <button class="btn btn4">color4</button>
  <button class="btn btn5">color5</button>
  <button class="btn btn6">color6</button>
  <button class="btn btn7">color7</button>
  <button class="btn btn8">color8</button>
  <button class="btn btn9">color9</button>
  <button class="btn btn10">color10</button>
</nav>

In your stylesheet, make ten classes, color1 to .color10, each with a different background color:

.color1 {
  background-color: red;
}
.color2 {
  background-color: pink;
}
.color3 {
  background-color: blue;
}
.color4 {
  background-color: orange;
}
.color5 {
  background-color: salmon;
}
.color6 {
  background-color: peach;
}
.color7 {
  background-color: seagreen;
}
.color8 {
  background-color: grey;
}
.color9 {
  background-color: cyan;
}
.color10 {
  background-color: magenta;
}

In your JavaScript file, select the buttons. If you use document.querySelector(), you can select a single element. If you use document.querySelectorAll(), you can select multiple elements.

With these methods, you can select tags, classes, ids, descendents, siblings, etc–anything. The value passed to these methods just must be a valid CSS selector.

Here we select the NAV as well as the BODY of the document. (In the second line, referencing the body is a special case: it doesn’t need to use the querySelector method…but the method would work if you did use it.)

[js]
const menu = document.querySelector('nav');
const body = document.body;

Now add an eventListener to the NAV element you just selected:

menu.addEventListener('click', function(){
  console.log('it works');
});

Here, we’re just testing to see if the click handler is correctly attached. You should see the phrase it works in the console whenever you click a button.

Now modify the script as follows:

menu.addEventListener('click', function(e){
   body.classList="";
   body.classList.add(`${e.target.textContent}-active`);
});

What we’re doing here is the following:

removing any classes from the body element by setting the classList to an empty string
testing to see which button is the target of the NAV’s click eventListener.
attaching the text of the clicked button as a class to the BODY (with an extra word or two in the class)

This will allow you to make different styles active with descendent selectors.

In other words, you could make styles that apply to lists but only right after button 9 has been clicked by using styles like this: color9-active ul.