CODEWITHSUNDEEP
javascripthtmlcss
Max Milli
Max Milli

Reputation: 11

Multiple click counters with unique values for each one

I need to have multiple buttons each with their own value when clicked in order to display how many of a certain product is bought per day. The issues right now is that they all add up to the same sum even though they all have unique IDs.

I've tried multiple different ways to do the script but they all add to the same sum.

var clicks = 0;

function myFunction1(val) {
  count = clicks += 1;
  document.getElementById("demo1").innerHTML = clicks;
}

var clicks = 0;

function myFunction2() {
  clicks += 1;
  document.getElementById("demo2").innerHTML = clicks;
}
var clicks = 0;

function myFunction3() {
  clicks += 1;
  document.getElementById("demo3").innerHTML = clicks;
}
var clicks = 0;

function myFunction4() {
  clicks += 1;
  document.getElementById("demo4").innerHTML = clicks;
}
var clicks = 0;

function myFunction5() {
  clicks += 1;
  document.getElementById("demo5").innerHTML = clicks;
}
var clicks = 0;

function myFunction6() {
  clicks += 1;
  document.getElementById("demo6").innerHTML = clicks;
}
var clicks = 0;

function myFunction7() {
  clicks += 1;
  document.getElementById("demo7").innerHTML = clicks;
}
var clicks = 0;

function myFunction8() {
  clicks += 1;
  document.getElementById("demo8").innerHTML = clicks;
}
var clicks = 0;

function myFunction9() {
  clicks += 1;
  document.getElementById("demo9").innerHTML = clicks;
}
var clicks = 0;

function myFunction10() {
  clicks += 1;
  document.getElementById("demo10").innerHTML = clicks;
}

function myFunction11() {
  clicks += 1;
  document.getElementById("demo11").innerHTML = clicks;
}
var clicks = 0;

function myFunction12() {
  clicks += 1;
  document.getElementById("demo12").innerHTML = clicks;
}
var clicks = 0;

function myFunction13() {
  clicks += 1;
  document.getElementById("demo13").innerHTML = clicks;
}
var clicks = 0;

function myFunction14() {
  clicks += 1;
  document.getElementById("demo14").innerHTML = clicks;
}
var clicks = 0;

function myFunction15() {
  clicks += 1;
  document.getElementById("demo15").innerHTML = clicks;
}
var clicks = 0;

function myFunction16() {
  clicks += 1;
  document.getElementById("demo16").innerHTML = clicks;
}
var clicks = 0;

function myFunction17() {
  clicks += 1;
  document.getElementById("demo17").innerHTML = clicks;
}
body {
  background: #97CE98;
}

.btn-group {
  display: grid;
  grid-template-columns: 4;
  grid-row: 5 minmax(100px, auto);
  grid-gap: 5px;
}

.one {
  grid-column: 1/4;
  grid-row: 1;
  display: flex;
}

.two {
  grid-column: 2/4;
  grid-row: 1;
  display: flex;
}

.three {
  grid-column: 3/4;
  grid-row: 1;
  display: flex;
}

.four {
  grid-column: 4/4;
  grid-row: 1;
  display: flex;
}

.five {
  grid-column: 1/4;
  grid-row: 2;
  display: flex;
}

.six {
  grid-column: 2/4;
  grid-row: 2;
  display: flex;
}

.seven {
  grid-column: 3/4;
  grid-row: 2;
  display: flex;
}

.eight {
  grid-column: 4/4;
  grid-row: 2;
  display: flex;
}

.nine {
  grid-column: 1/4;
  grid-row: 3;
  display: flex;
}

.ten {
  grid-column: 2/4;
  grid-row: 3;
  display: flex;
}

.eleven {
  grid-column: 3/4;
  grid-row: 3;
  Display: flex;
}

.twelve {
  grid-column: 4/4;
  grid-row: 3;
  display: flex;
}

.thirteen {
  grid-column: 1/4;
  grid-row: 4;
  display: flex;
}

.fourteen {
  grid-column: 2/4;
  grid-row: 4;
  display: flex;
}

.fifteen {
  grid-column: 3/4;
  grid-row: 4;
  display: flex;
}

.sixteen {
  grid-column: 4/4;
  grid-row: 4;
  display: flex;
}

.seventeen {
  grid-column: 1/4;
  grid-row: 5;
  display: flex;
}
<p align="center">TPG Product Counter</p>
<div align="center" class="btn-group">
  <div class="one">
    <button onclick="myFunction1()" style="width:20%" id="demo1">Minced Hot 8oz </button>
  </div>
  <div class="two">
    <button onclick="myFunction2()" style="width:20%" id="demo2">Minced Hot 16oz </button>
  </div>
  <div class="three">
    <button onclick="myFunction3()" style="width:20%" id="demo3">Mindced Hot 24oz </button>
  </div>
  <div class="four">
    <button onclick="myFunction4()" style="width:20%" id="demo4">Chunky Hot 8oz </button>
  </div>
  <div class="five">
    <button onclick="myFunction5()" style="width:20%" id="demo5">Chunky Hot 16oz </button>
  </div>
  <div class="six">
    <button onclick="myFunction6()" style="width:20%" id="demo6">Chunky Hot 24oz </button>
  </div>
  <div class="seven">
    <button onclick="myFunction7()" style="width:20%" id="demo7">Hot Minced 8oz </button>
  </div>
  <div class="eight">
    <button onclick="myFunction8()" style="width:20%" id="demo8">Hot Minced 8oz </button>
  </div>
  <div class="nine">
    <button onclick="myFunction9()" style="width:20%" id="demo9">Hot Minced 8oz </button>
  </div>
  <div class="ten">
    <button onclick="myFunction10()" style="width:20%" id="demo10">Hot Minced 8oz </button>
  </div>
  <div class="eleven">
    <button onclick="myFunction11()" style="width:20%" id="demo11">Hot Minced 8oz </button>
  </div>
  <div class="twelve">
    <button onclick="myFunction12()" style="width:20%" id="demo12">Hot Minced 8oz </button>
  </div>
  <div class="thirteen">
    <button onclick="myFunction13()" style="width:20%" id="demo13">Hot Minced 8oz </button>
  </div>
  <div class="fourteen">
    <button onclick="myFunction14()" style="width:20%" id="demo14">Hot Minced 8oz </button>
  </div>
  <div class="fifteen">
    <button onclick="myFunction15()" style="width:20%" id="demo15">Hot Minced 8oz </button>
  </div>
  <div class="sixteen">
    <button onclick="myFunction16()" style="width:20%" id="demo16">Hot Minced 8oz </button>
  </div>
  <div class="seventeen">
    <button onclick="myFunction17()" style="width:20%" id="demo17">Hot Minced 8oz </button>
  </div>
</div>

When you click on any button they will all add up to the same sum instead of having unique totals.

Upvotes: 1

Views: 1396

Answers (5)

Nosajimiki
Nosajimiki

Reputation: 1103

This is because you are using the same variable, "clicks"

If you make each variable unique: clicks1, clicks2, etc. you can store them as separate counters.

Or better yet, you can store them as an array.

<p align="center">TPG Product Counter</p>
<div align="center" class="btn-group">
  <div class="col-1 row-1">
    <button onclick="myFunction(1)" style="width:70%" id="demo1">Minced Hot 8oz </button> <span id="output1" class="output"></span>
  </div>
  <div class="col-2 row-1">
    <button onclick="myFunction(2)" style="width:70%" id="demo2">Minced Hot 16oz </button> <span id="output2" class="output"></span>
  </div>
  <div class="col-3 row-1">
    <button onclick="myFunction(3)" style="width:70%" id="demo3">Mindced Hot 24oz </button> <span id="output3" class="output"></span>
  </div>
 <div class="col-4 row-1">
    <button onclick="myFunction(4)" style="width:70%" id="demo4">Chunky Hot 8oz </button> <span id="output4" class="output"></span>
  </div>
  <div class="col-1 row-2">
    <button onclick="myFunction(5)" style="width:70%" id="demo5">Chunky Hot 16oz </button> <span id="output5" class="output"></span>
  </div>
  <div class="col-2 row-2">
    <button onclick="myFunction(6)" style="width:70%" id="demo6">Chunky Hot 24oz </button> <span id="output6" class="output"></span>
  </div>
  <div class="col-3 row-2">
    <button onclick="myFunction(7)" style="width:70%" id="demo7">Hot Minced 8oz </button> <span id="output7" class="output"></span>
  </div>
  <div class="col-4 row-2">
    <button onclick="myFunction(8)" style="width:70%" id="demo8">Hot Minced 8oz </button> <span id="output8" class="output"></span>
  </div>
  <div class="col-1 row-3">
    <button onclick="myFunction(9)" style="width:70%" id="demo9">Hot Minced 8oz </button> <span id="output9" class="output"></span>
  </div>
  <div class="col-2 row-3">
    <button onclick="myFunction(10)" style="width:70%" id="demo10">Hot Minced 8oz </button> <span id="output10" class="output"></span>
  </div>
  <div class="col-3 row-3">
    <button onclick="myFunction(11)" style="width:70%" id="demo11">Hot Minced 8oz </button> <span id="output11" class="output"></span>
  </div>
  <div class="col-4 row-3">
    <button onclick="myFunction(12)" style="width:70%" id="demo12">Hot Minced 8oz </button> <span id="output12" class="output"></span>
  </div>
  <div class="col-1 row-4">
    <button onclick="myFunction(13)" style="width:70%" id="demo13">Hot Minced 8oz </button> <span id="output13" class="output"></span>
  </div>
  <div class="col-2 row-4">
    <button onclick="myFunction(14)" style="width:70%" id="demo14">Hot Minced 8oz </button> <span id="output14" class="output"></span>
  </div>
  <div class="col-3 row-4">
    <button onclick="myFunction(15)" style="width:70%" id="demo15">Hot Minced 8oz </button> <span id="output15" class="output"></span>
  </div>
  <div class="col-4 row-4">
    <button onclick="myFunction(16)" style="width:70%" id="demo16">Hot Minced 8oz </button> <span id="output16" class="output"></span>
  </div>
  <div class="col-1 row-5">
    <button onclick="myFunction(17)" style="width:70%" id="demo17">Hot Minced 8oz </button> <span id="output17" class="output"></span>
  </div>
</div>

<script>
var arrayLength = 17;  // Make this the number of buttons you have
var clicks = Array(arrayLength).fill(0);
function myFunction(val) {
  clicks[val-1] += 1;
  document.getElementById("output"+val).innerHTML = clicks[val-1];
}
</script>

<style>
body {
  background: #97CE98;
}

.output {padding-left:20px;}
.btn-group {
  display: grid;
  grid-template-columns: 4;
  grid-row: 5 minmax(100px, auto);
  grid-gap: 5px;
}

.col-1 {grid-column: 1;display: flex;}
.col-2 {grid-column: 2;display: flex;}
.col-3 {grid-column: 3;display: flex;}
.col-4 {grid-column: 4;display: flex;}
.row-1 {grid-row: 1;}
.row-2 {grid-row: 2;}
.row-3 {grid-row: 3;}
.row-4 {grid-row: 4;}
.row-5 {grid-row: 5;}
</style>

To add to a variable in an array you make myArray[X] = myInput; where X is the position in the array. In the above example, you pass myFunction() the position you want to use; so, that the function applies it to the right place. Of note, array positions start at 0 not 1. Since your IDs begin at 1 and am using val-1 for the position so that you can keep consistant nameing, or you can start naming your ids at 0 and then you don't need to adjust for this.

Upvotes: 0

A. Meshu
A. Meshu

Reputation: 4148

I would do it like that:

var buttons = document.querySelectorAll("div#demo button"); // this will select all buttons inside demo div
var clicks = []; // this hold the clicks count
for (var i=0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    clicks.push(this.id); // add the id of the button that been clicked to the arrays
    // taken from here: https://stackoverflow.com/a/32886673/6525081
    var map = clicks.reduce(function(prev, cur) {
      prev[cur] = (prev[cur] || 0) + 1;
      return prev;
    }, {});
    document.querySelector('div#demo2').textContent = (JSON.stringify(map));
  });
}
<div id="demo">
  <div class="one"><button style="width:20%" id="demo1">Minced Hot 8oz </button></div>
  <div class="two"><button style="width:20%" id="demo2">Minced Hot 16oz </button></div>
  <div class="three"><button style="width:20%" id="demo3">Mindced Hot 24oz </button></div>
  <div class="four"><button style="width:20%" id="demo4">Chunky Hot 8oz </button></div>
  <div class="five"><button style="width:20%" id="demo5">Chunky Hot 16oz </button></div>
  <div class="six"><button style="width:20%" id="demo6">Chunky Hot 24oz </button></div>
  <div class="seven"><button style="width:20%" id="demo7">Hot Minced 8oz </button></div>
  <div class="eight"><button style="width:20%" id="demo8">Hot Minced 8oz </button></div>
  <div class="nine"><button style="width:20%" id="demo9">Hot Minced 8oz </button></div>
  <div class="ten"><button style="width:20%" id="demo10">Hot Minced 8oz </button></div>
  <div class="eleven"><button style="width:20%" id="demo11">Hot Minced 8oz </button></div>
  <div class="twelve"><button style="width:20%" id="demo12">Hot Minced 8oz </button></div>
  <div class="thirteen"><button style="width:20%" id="demo13">Hot Minced 8oz </button></div>
  <div class="fourteen"><button style="width:20%" id="demo14">Hot Minced 8oz </button></div>
  <div class="fifteen"><button style="width:20%" id="demo15">Hot Minced 8oz </button></div>
  <div class="sixteen"><button style="width:20%" id="demo16">Hot Minced 8oz </button></div>
  <div class="seventeen"><button style="width:20%" id="demo17">Hot Minced 8oz </button></div>
</div>
<div id="demo2"></div>

Upvotes: 0

Christian Carrillo
Christian Carrillo

Reputation: 2761

You could use:

// target all buttons & parsing nodeList to arrayList (ES6 feature)
const buttons = [...document.querySelectorAll("button")];

// apply reduce on buttons to get his ids as key of properties with values = 0; 
// inside the object called "values" :
// values: { demo1: 0, demo2: 0, ... }
const values = buttons.reduce((acc, item) => {
  acc[item.id] = 0;
  return acc;
}, {});

// adding listerners with event "click" for each button, to take his value 
// in the object called "values" according his name key property to be
// insert as his innerHTML
buttons.forEach(button => {
  button.addEventListener("click", function() {
    this.innerHTML = values[this.id]++;
  });
});
<div class="one"><button style="width:20%" id="demo1">Minced Hot 8oz </button></div>
    <div class="two"><button style="width:20%" id="demo2">Minced Hot 16oz </button></div>
    <div class="three"><button style="width:20%" id="demo3">Mindced Hot 24oz </button></div>
    <div class="four"><button style="width:20%" id="demo4">Chunky Hot 8oz </button></div>
    <div class="five"><button style="width:20%" id="demo5">Chunky Hot 16oz </button></div>
    <div class="six"><button style="width:20%" id="demo6">Chunky Hot 24oz </button></div>
    <div class="seven"><button style="width:20%" id="demo7">Hot Minced 8oz </button></div>
    <div class="eight"><button style="width:20%" id="demo8">Hot Minced 8oz </button></div>
    <div class="nine"><button style="width:20%" id="demo9">Hot Minced 8oz </button></div>
    <div class="ten"><button style="width:20%" id="demo10">Hot Minced 8oz </button></div>
    <div class="eleven"><button style="width:20%" id="demo11">Hot Minced 8oz </button></div>
    <div class="twelve"><button style="width:20%" id="demo12">Hot Minced 8oz </button></div>
    <div class="thirteen"><button style="width:20%" id="demo13">Hot Minced 8oz </button></div>
    <div class="fourteen"><button style="width:20%" id="demo14">Hot Minced 8oz </button></div>
    <div class="fifteen"><button style="width:20%" id="demo15">Hot Minced 8oz </button></div>
    <div class="sixteen"><button style="width:20%" id="demo16">Hot Minced 8oz </button></div>
    <div class="seventeen"><button style="width:20%" id="demo17">Hot Minced 8oz </button></div>

Upvotes: 0

Hossein Shourabi
Hossein Shourabi

Reputation: 456

1- get all btn
2- with a loop find which btn clicked.
3- get the id.
4- set counter
5- save counter as attribute data-counter
7- now play with data-counter. 

const btn= document.querySelectorAll('button');
for (var i = 0; i < btn.length; i += 1) {
    btn[i].onclick = function(e) {
        let selector = document.getElementById(this.id);
        let dataCount = selector.getAttribute('data-count');
        if(dataCount == 0) {
          dataCount = 1;
          let productName = selector.innerHTML;
        }else{
          dataCount = Number(dataCount) + 1;
        }
        selector.setAttribute('data-count', dataCount);
        
        selector.innerHTML = dataCount;
    };
}
<!DOCTYPE html>
<html>
<head>

<Style> 

    body{background: #97CE98;}

  button{width:auto}

.btn-group {        
    display: grid; 
    grid-template-columns: 4;
    grid-row: 5 minmax(100px,auto);
    grid-gap: 5px;

    }
.one {
    grid-column: 1/4;
    grid-row:1;
    display: flex;

    }
    .two {
    grid-column: 2/4;
    grid-row:1;
    display: flex;
    }
    .three {
    grid-column: 3/4;
    grid-row:1;
    display: flex;
    }
    .four {
    grid-column: 4/4;
    grid-row:1;
    display: flex;
    }
    .five {
    grid-column: 1/4;
    grid-row:2;
    display: flex;
    }
    .six {
    grid-column: 2/4;
    grid-row:2;
    display: flex;
    }
    .seven {
    grid-column: 3/4;
    grid-row:2;
    display: flex;
    }
    .eight {
    grid-column: 4/4;
    grid-row:2;
    display: flex;
    }
    .nine {
    grid-column: 1/4;
    grid-row:3;
    display: flex;
    }
    .ten {
    grid-column: 2/4;
    grid-row:3;
    display: flex;
    }
    .eleven {
    grid-column: 3/4;
    grid-row:3;
    Display: flex;
    }
    .twelve {
    grid-column: 4/4;
    grid-row:3;
    display: flex;
    }
    .thirteen {
    grid-column: 1/4;
    grid-row:4;
    display: flex;
    }
    .fourteen {
    grid-column: 2/4;
    grid-row:4;
    display: flex;
    }
    .fifteen {
    grid-column: 3/4;
    grid-row:4;
    display: flex;
    }
    .sixteen {
    grid-column: 4/4;
    grid-row:4;
    display: flex;
    }
    .seventeen {
    grid-column: 1/4;
    grid-row:5;
    display: flex;
    }






    </Style>


<script>

</script>


</head>
<body>

<p align="center">TPG Product Counter</p>



<div align="center" class="btn-group">
  
  <div class="one"><button id="demo1">Minced Hot 8oz </button></div>
    <div class="two"><button   id="demo2">Minced Hot 16oz </button></div>
    <div class="three"><button  id="demo3">Mindced Hot 24oz </button></div>
    <div class="four"><button  id="demo4">Chunky Hot 8oz </button></div>
    <div class="five"><button   id="demo5">Chunky Hot 16oz </button></div>
    <div class="six"><button  id="demo6">Chunky Hot 24oz </button></div>
    <div class="seven"><button id="demo7">Hot Minced 8oz </button></div>
    <div class="eight"><button  id="demo8">Hot Minced 8oz </button></div>
    <div class="nine"><button  id="demo9">Hot Minced 8oz </button></div>
    <div class="ten"><button id="demo10">Hot Minced 8oz </button></div>
    <div class="eleven"><button  id="demo11">Hot Minced 8oz </button></div>
    <div class="twelve"><button id="demo12">Hot Minced 8oz </button></div>
    <div class="thirteen"><button id="demo13">Hot Minced 8oz </button></div>
    <div class="fourteen"><button  id="demo14">Hot Minced 8oz </button></div>
    <div class="fifteen"><button id="demo15">Hot Minced 8oz </button></div>
    <div class="sixteen"><button id="demo16">Hot Minced 8oz </button></div>
    <div class="seventeen"><button  id="demo17">Hot Minced 8oz </button></div>

    </div>

Upvotes: 0

ThS
ThS

Reputation: 4783

Why having such a huge number of functions when this could be done with only one that is applied to all the buttons and it will do the counting for each one (button) individually :

  • add the same class for all the buttons that are having the count functionality (not really necessary but it help us categorize each component in the page based on its role) that will help us select them in JavaScript.
  • add a click handler to these buttons (remove all the onclick attributes from HTML) directly in JavaScript which will count the clicks for every button separately (each button has its own counter).
  • the clicks counters are stored in an array of number of the buttons elements element (its length).

The next demo will help you more, it also contains some helpful comments :

/**
* btns: the buttons having the "btn-click-count" class (an array).
* btnsClicksCountArr: array to store the click counters for each button
**/
const btns = [...document.querySelectorAll('button.btn-click-count')],
  btnsClicksCountArr = new Array(btns.length);

/** cycle through the buttons and apply a click handler for each one **/

/**
* el: the current button from the array of buttons (btns).
* i: its index in that array.
**/

btns.forEach((el, i) => {
  /** initialize the btnsClicksCountArr at the index i with 0 **/
  btnsClicksCountArr[i] = 0;
  
  /** add click event handler for the current button in the array (btns) **/
  el.addEventListener('click', () => el.textContent = ++btnsClicksCountArr[i]); /** increment the value stored in btnsClicksCountArr at the index i (the same index for that current button in the array btns) and write it in the button **/
});
body {
  background: #97CE98;
}

.btn-group {
  display: grid;
  grid-template-columns: 4;
  grid-row: 5 minmax(100px, auto);
  grid-gap: 5px;
}

.one {
  grid-column: 1/4;
  grid-row: 1;
  display: flex;
}

.two {
  grid-column: 2/4;
  grid-row: 1;
  display: flex;
}

.three {
  grid-column: 3/4;
  grid-row: 1;
  display: flex;
}

.four {
  grid-column: 4/4;
  grid-row: 1;
  display: flex;
}

.five {
  grid-column: 1/4;
  grid-row: 2;
  display: flex;
}

.six {
  grid-column: 2/4;
  grid-row: 2;
  display: flex;
}

.seven {
  grid-column: 3/4;
  grid-row: 2;
  display: flex;
}

.eight {
  grid-column: 4/4;
  grid-row: 2;
  display: flex;
}

.nine {
  grid-column: 1/4;
  grid-row: 3;
  display: flex;
}

.ten {
  grid-column: 2/4;
  grid-row: 3;
  display: flex;
}

.eleven {
  grid-column: 3/4;
  grid-row: 3;
  Display: flex;
}

.twelve {
  grid-column: 4/4;
  grid-row: 3;
  display: flex;
}

.thirteen {
  grid-column: 1/4;
  grid-row: 4;
  display: flex;
}

.fourteen {
  grid-column: 2/4;
  grid-row: 4;
  display: flex;
}

.fifteen {
  grid-column: 3/4;
  grid-row: 4;
  display: flex;
}

.sixteen {
  grid-column: 4/4;
  grid-row: 4;
  display: flex;
}

.seventeen {
  grid-column: 1/4;
  grid-row: 5;
  display: flex;
}
<!-- removed all the "onclick" attributes as this (attaching event listeners) will be placed in the JavaScript part -->

<!-- added a class of "btn-click-count" to all the buttons that will have counters -->

<p align="center">TPG Product Counter</p>
<div align="center" class="btn-group">
  <div class="one">
    <button class="btn-click-count" style="width:20%" id="demo1">Minced Hot 8oz </button>
  </div>
  <div class="two">
    <button class="btn-click-count" style="width:20%" id="demo2">Minced Hot 16oz </button>
  </div>
  <div class="three">
    <button class="btn-click-count" style="width:20%" id="demo3">Mindced Hot 24oz </button>
  </div>
  <div class="four">
    <button class="btn-click-count" style="width:20%" id="demo4">Chunky Hot 8oz </button>
  </div>
  <div class="five">
    <button class="btn-click-count" style="width:20%" id="demo5">Chunky Hot 16oz </button>
  </div>
  <div class="six">
    <button class="btn-click-count" style="width:20%" id="demo6">Chunky Hot 24oz </button>
  </div>
  <div class="seven">
    <button class="btn-click-count" style="width:20%" id="demo7">Hot Minced 8oz </button>
  </div>
  <div class="eight">
    <button class="btn-click-count" style="width:20%" id="demo8">Hot Minced 8oz </button>
  </div>
  <div class="nine">
    <button class="btn-click-count" style="width:20%" id="demo9">Hot Minced 8oz </button>
  </div>
  <div class="ten">
    <button class="btn-click-count" style="width:20%" id="demo10">Hot Minced 8oz </button>
  </div>
  <div class="eleven">
    <button class="btn-click-count" style="width:20%" id="demo11">Hot Minced 8oz </button>
  </div>
  <div class="twelve">
    <button class="btn-click-count" style="width:20%" id="demo12">Hot Minced 8oz </button>
  </div>
  <div class="thirteen">
    <button class="btn-click-count" style="width:20%" id="demo13">Hot Minced 8oz </button>
  </div>
  <div class="fourteen">
    <button class="btn-click-count" style="width:20%" id="demo14">Hot Minced 8oz </button>
  </div>
  <div class="fifteen">
    <button class="btn-click-count" style="width:20%" id="demo15">Hot Minced 8oz </button>
  </div>
  <div class="sixteen">
    <button class="btn-click-count" style="width:20%" id="demo16">Hot Minced 8oz </button>
  </div>
  <div class="seventeen">
    <button class="btn-click-count" style="width:20%" id="demo17">Hot Minced 8oz </button>
  </div>
</div>

Some useful links :

Learn more about addEventListener function.

Learn more about forEach function.

Upvotes: 3

Related Questions