I am trying to use the same "id" or "class" for multiple buttons to incrementally count by 1 using javascript.
The code below shows how I can count by increments of 1 by clicking one button, but does not work with the other button using the same "id".
To help myself start to understand the process of doing this, I copied code online that uses getElementById, which you can see below. This code does not do what I intend as only one button adds to the counter and not the other using the same "id". Ideally, I'd like both buttons using only one "id" or one "class" to add to the counter. I want to do this to keep my code short:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COUNTER</title>
</head>
<body>
<h1>Counter</h1>
<div class="counter">
<button id="shopping-cart-add-on">+</button>
<button id="shopping-cart-add-on">+</button>
<div id="counter-value">0</div>
</div>
<script>
let counter = 0;
const counterValue = document.getElementById('counter-value');
const incrementBtn = document.getElementById('shopping-cart-add-on');
const incrementBtnTwo = document.getElementById('shopping-cart-add-on-two');
// To increment the value of counter
incrementBtn.addEventListener('click', () => {
counter++;
counterValue.innerHTML = counter;
});
incrementBtnTwo.addEventListener('click', () => {
counter++;
counterValue.innerHTML = counter;
});
</script>
</body>
</html>
From what I've gathered online, "getElementById" cannot be used multiple times in the way I intend. I then researched into "getElementsByclassname" in hopes of using "class" to count by one for multiple buttons. I also looked into for loop options, but am having trouble with this.
What would be the best approach using javascript using one "class" or "id" to count for multiple buttons? I am trying to keep my javascript code short without having to write multiple "id" or "classes", etc.
Thanks
EDIT AND SOLUTION:
<h1>Counter</h1>
<div class="counter">
<button class="shopping-cart-add-on">+</button>
<button class="shopping-cart-add-on">+</button>
<div id="counter-value">0</div>
</div>
<script>
let counter = 0;
const counterValue = document.getElementById('counter-value');
// To increment the value of counter
let incrementBtn = document.querySelectorAll('.shopping-cart-add-on');
incrementBtn.forEach(function (elem) {
elem.addEventListener('click', () => {
counter++;
counterValue.innerHTML = counter;
});
});
</script>
