Select more than one class within a div and keep track of how many times they have been clicked using pure JavaScript

Question

Select more than one class within a div and keep track of how many times they have been clicked using pure JavaScript

This code snippet serves the purpose of tracking the number of clicks on buttons with either the testButton or incButton class, and displaying an overlay after two clicks. However, two main issues have been identified: 1: Difficulty in selecting buttons with different classes. 2: The existing JavaScript code only works for the first button with the testButton class when there are multiple buttons with the same class name.

The provided code is as follows:

<style>
    #winOverlay {
        position: fixed;
        z-index: 200;
        width: 100%;
        height: 100%;
        background-color: red;
        top: 0;
        left: 0;
    }
</style>

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
    <button class="testButton">1</button>
    <button class="incButton">2</button>
    <button class="testButton">3</button>
    <button class="incButton">4</button>
    <button class="testButton">5</button>
</div>


<script>
    var count = 0;
    var btn = document.getElementById("buttonContainer").querySelector(".testButton");

    btn.onclick = function () {
        count++;
        if (count == 2) {
            document.getElementById('winOverlay').style.display = "block";
        }
    }
</script>

Your assistance in resolving these issues would be highly appreciated.

javascript

Answer 1

Answer №1

You can utilize the concept of event delegation by adding an event listener to the common parent container with the class buttonContainer. This way, you can determine if the button clicked has the id testButton or incButon.

1)

This code is designed to calculate the count irrespective of which button is clicked.

var count = 0;
var btn = document.getElementById("buttonContainer");
const winOverlay = document.getElementById('winOverlay');

btn.addEventListener("click", e => {
  const classes = e.target.classList;
  if (classes.contains("testButton") || classes.contains("incButon")) {
    count++;
    if (count === 2) winOverlay.style.display = "block";
  }
})

#winOverlay {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: red;
  top: 0;
  left: 0;
}

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButon">2</button>
  <button class="testButton">3</button>
  <button class="incButon">4</button>
  <button class="testButton">5</button>
</div>

2)

This code is meant for calculating the count based on the specific key of the button clicked and displaying the overlay when the count reaches 2.

var btn = document.getElementById("buttonContainer");
const winOverlay = document.getElementById("winOverlay");
const dict = {};

btn.addEventListener("click", (e) => {
  const classes = e.target.classList;
  const addOverlay = () => (winOverlay.style.display = "block");

  if (classes.contains("testButton") || classes.contains("incButon")) {
    const key = e.target.dataset.key;
    dict[key] = (dict[key] || 0) + 1;
    if (dict[key] === 2) addOverlay();
  }
});

#winOverlay {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: red;
  top: 0;
  left: 0;
}

button {
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
}

button.testButton {
  background-color: teal;
}

button.incButon {
  background-color: orange;
}

<div id="winOverlay" style="display: none;"></div>

<div id="buttonContainer">
  <button class="testButton" data-key="testButton">1</button>
  <button class="incButon" data-key="incButon">2</button>
  <button class="testButton" data-key="testButton">3</button>
  <button class="incButon" data-key="incButon">4</button>
  <button class="testButton" data-key="testButton">5</button>
</div>

Answer 2

You can utilize the concept of event delegation by adding an event listener to the common parent container with the class buttonContainer. This way, you can determine if the button clicked has the id testButton or incButon.

1)

This code is designed to calculate the count irrespective of which button is clicked.

var count = 0;
var btn = document.getElementById("buttonContainer");
const winOverlay = document.getElementById('winOverlay');

btn.addEventListener("click", e => {
  const classes = e.target.classList;
  if (classes.contains("testButton") || classes.contains("incButon")) {
    count++;
    if (count === 2) winOverlay.style.display = "block";
  }
})

#winOverlay {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: red;
  top: 0;
  left: 0;
}

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButon">2</button>
  <button class="testButton">3</button>
  <button class="incButon">4</button>
  <button class="testButton">5</button>
</div>

2)

This code is meant for calculating the count based on the specific key of the button clicked and displaying the overlay when the count reaches 2.

var btn = document.getElementById("buttonContainer");
const winOverlay = document.getElementById("winOverlay");
const dict = {};

btn.addEventListener("click", (e) => {
  const classes = e.target.classList;
  const addOverlay = () => (winOverlay.style.display = "block");

  if (classes.contains("testButton") || classes.contains("incButon")) {
    const key = e.target.dataset.key;
    dict[key] = (dict[key] || 0) + 1;
    if (dict[key] === 2) addOverlay();
  }
});

#winOverlay {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: red;
  top: 0;
  left: 0;
}

button {
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
}

button.testButton {
  background-color: teal;
}

button.incButon {
  background-color: orange;
}

<div id="winOverlay" style="display: none;"></div>

<div id="buttonContainer">
  <button class="testButton" data-key="testButton">1</button>
  <button class="incButon" data-key="incButon">2</button>
  <button class="testButton" data-key="testButton">3</button>
  <button class="incButon" data-key="incButon">4</button>
  <button class="testButton" data-key="testButton">5</button>
</div>

Answer 3

Answer №2

To activate all buttons, use querySelectorAll to select them and add event listeners to each.

var counter = 0;
const buttonGroup = document.querySelectorAll("#buttonContainer > button");
 
for (let idx = 0; idx < buttonGroup.length; idx++) {
  const element = buttonGroup[idx];
  element.onclick = function() {
    counter++;
    if (counter == 2) {
      document.getElementById('winOverlay').style.display = "block";
    }
  }
}

#winOverlay {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: red;
  top: 0;
  left: 0;
}

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButon">2</button>
  <button class="testButton">3</button>
  <button class="incButon">4</button>
  <button class="testButton">5</button>
</div>

Answer 4

To activate all buttons, use querySelectorAll to select them and add event listeners to each.

var counter = 0;
const buttonGroup = document.querySelectorAll("#buttonContainer > button");
 
for (let idx = 0; idx < buttonGroup.length; idx++) {
  const element = buttonGroup[idx];
  element.onclick = function() {
    counter++;
    if (counter == 2) {
      document.getElementById('winOverlay').style.display = "block";
    }
  }
}

#winOverlay {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: red;
  top: 0;
  left: 0;
}

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButon">2</button>
  <button class="testButton">3</button>
  <button class="incButon">4</button>
  <button class="testButton">5</button>
</div>

Answer 5

Answer №3

When choosing two classes in CSS, you need to follow these steps:

querySelector(class1 class2)

However, this method doesn't work because querySelector can only select one class at a time. It will only choose either class1 or class2 and grab the first Element it finds.

Instead, you should use querySelectorAll() to select all of them.

Answer 6

When choosing two classes in CSS, you need to follow these steps:

querySelector(class1 class2)

However, this method doesn't work because querySelector can only select one class at a time. It will only choose either class1 or class2 and grab the first Element it finds.

Instead, you should use querySelectorAll() to select all of them.

Answer 7

Answer №4

Like the suggestions from others, querySelectorAll allows for multiple selectors. It returns an array-like nodelist that can be iterated over.

document.querySelectorAll('testButton', 'incButton');

An alternative method is through event delegation, which enables attaching one listener to a parent element to capture events as they bubble up the DOM.

This example features a closure, creating a function within another function that retains variables set outside it in the local lexical environment when returned. This eliminates the need for global variables by using an object to store button totals.

// Cache your container and overlay elements
const container = document.querySelector('.buttonContainer');
const overlay = document.querySelector('.overlay');

container.addEventListener('click', handleClick(), false);

function handleClick() {
  
  const cases = {
    testButton: 0,
    incButton: 0
  };
  
  return function (e) {

    const { nodeName, className } = e.target;

    if (nodeName === 'BUTTON') {
      
      ++cases[className];
      console.log(JSON.stringify(cases));

      if (cases[className] === 2) {
        overlay.classList.add('show');
      }

    }
    
  }

}

.overlay { display: none; margin: 1em; background-color: #acaccc; black: white; padding: 2em; }
.show { display: block; }
button { padding: 0.7em; }
button:hover { cursor: pointer; background-color: #acacac; }

<div class="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButton">2</button>
  <button class="testButton">3</button>
  <button class="incButton">4</button>
  <button class="testButton">5</button>
</div>

<div class="overlay">Overlay</div>

Additional resources:

Answer 8

Like the suggestions from others, querySelectorAll allows for multiple selectors. It returns an array-like nodelist that can be iterated over.

document.querySelectorAll('testButton', 'incButton');

An alternative method is through event delegation, which enables attaching one listener to a parent element to capture events as they bubble up the DOM.

This example features a closure, creating a function within another function that retains variables set outside it in the local lexical environment when returned. This eliminates the need for global variables by using an object to store button totals.

// Cache your container and overlay elements
const container = document.querySelector('.buttonContainer');
const overlay = document.querySelector('.overlay');

container.addEventListener('click', handleClick(), false);

function handleClick() {
  
  const cases = {
    testButton: 0,
    incButton: 0
  };
  
  return function (e) {

    const { nodeName, className } = e.target;

    if (nodeName === 'BUTTON') {
      
      ++cases[className];
      console.log(JSON.stringify(cases));

      if (cases[className] === 2) {
        overlay.classList.add('show');
      }

    }
    
  }

}

.overlay { display: none; margin: 1em; background-color: #acaccc; black: white; padding: 2em; }
.show { display: block; }
button { padding: 0.7em; }
button:hover { cursor: pointer; background-color: #acacac; }

<div class="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButton">2</button>
  <button class="testButton">3</button>
  <button class="incButton">4</button>
  <button class="testButton">5</button>
</div>

<div class="overlay">Overlay</div>

Additional resources:

Select more than one class within a div and keep track of how many times they have been clicked using pure JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Excessive API requests can occur when Redux dispatches an action multiple times

Sluggishness in updating properties in a child component using React

Even after being removed from the DOM using Ajax load, JQuery continues to execute

KnockoutJS is not recognizing containerless if binding functionality

Troubleshooting HTTP requests in Angular JS when dealing with nested scopes

The function vue.findIndex is not recognized as a valid function

Develop a technique to transfer properties to elements in a REACT environment

Looping through an array asynchronously and returning the result

Interact with a JSON API using JavaScript by incorporating dynamic user input

Scrolling function for an automatically adjusting menu bar

Having trouble making the swing effect trigger on mouseover but not on page load

I am interested in developing a select box with autocomplete functionality

Exploring variable comparisons in Javascript

Properly defining the selector for the element.closest() method in the DOM

Color picker can be utilized as an HTML input element by following these steps

Working with JSON structure using Javascript

Maximizing Jest's potential with multiple presets in a single configuration file/setup

Struggling to transmit data to material dialog in Angular2+

Synchronize two div elements with JavaScript

Managing integer values in controllers with .NET Core 6