javascript - 跟踪多个按钮以及单击了多少个按钮

我的html中有多个clickable元素，并希望跟踪每个按钮的点击次数。
我可以做一个非常优雅的解决方案，其中包括为每个按钮都具有特定的功能，例如功能button1（），功能button2（）等...由onclick调用，但我相信这样做的更好方法是。
谢谢您的帮助。

<div class="starter">
        <h3>Starter</h3>
        <div class="starterItems">
            <button type="button" id="salmon" >Salmon Tartare with fresh diced tomatoes</button>
            <button type="button" id="prawn" >Prawn Cocktail with homemade marrinade</button>
            <button type="button" id="soup">Asparagus Soup served with croutons</button>
        </div>
</div>


var salmon = document.getElementById('salmon'),
prawn = document.getElementById('prawn'),
soup = document.getElementById('soup'),
clicks = {};

function click(e){
var id = e.target.id;
if(!clicks[id])
    clicks[id]=0;
clicks[id]++;
e.target.textContent = clicks[id];
}

salmon.addEventListener('click', click);
prawn.addEventListener('click', click);
soup.addEventListener('click', click);

最佳答案

使用元素的id作为键：

var b1 = document.getElementById('b1'),
  b2 = document.getElementById('b2'),
  b3 = document.getElementById('b3'),
  clicks = {};

function click(e) {
  var id = e.target.id;
  if (!clicks[id])
    clicks[id] = 0;
  clicks[id]++;
  e.target.textContent = clicks[id];
}

b1.addEventListener('click', click);
b2.addEventListener('click', click);
b3.addEventListener('click', click);

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>

使用data-属性：

var b1 = document.getElementById('b1'),
  b2 = document.getElementById('b2'),
  b3 = document.getElementById('b3');

function click(e) {
  if (!e.target.getAttribute('data-clicks'))
    e.target.setAttribute('data-clicks', 0);
  var clicks = parseInt(e.target.getAttribute('data-clicks'));
  e.target.setAttribute('data-clicks', clicks + 1);
  e.target.textContent = clicks + 1;
}

b1.addEventListener('click', click);
b2.addEventListener('click', click);
b3.addEventListener('click', click);

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>

而且，正如其他人提到的那样，使用localStorage也是有效的选项。该实现将类似于使用id作为上方的键。

关于javascript - 跟踪多个按钮以及单击了多少个按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35674004/