javascript - 多个点击计数器，每个点击计数器都有唯一值

Question

我需要有多个按钮，每个按钮在单击时都有自己的值，以便显示每天购买了多少特定产品。现在的问题是，尽管它们都有唯一的 ID，但它们加起来的总和相同。

我尝试了多种不同的方法来编写脚本，但它们都加到相同的总和上。

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>

当您单击任何按钮时，它们的总和将全部相同，而不是具有唯一的总数。

Answer 1

当这可以用应用于所有 button 的 only 完成时，为什么会有如此多的功能，并且它将为每个按钮进行计数(按钮)单独:

• 为所有具有计数功能的 button 添加相同的 class(不是必需的，但它可以帮助我们根据 Angular 色对页面中的每个组件进行分类) 这将帮助我们在 JavaScript 中选择它们。
• 直接在 JavaScript 中向这些 button 添加点击处理程序(从 HTML 中删除所有 onclick 属性) > 这将分别计算每个 button 的点击次数(每个 button 都有自己的计数器)。
• 点击计数器存储在 array 中，buttons 元素的数量(其长度)。

下一个演示会帮助你更多，它还包含一些有用的评论:

/**
* 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>

一些有用的链接:

Learn more about addEventListener function.

Learn more about forEach function.