创建一个多按钮唯一点击计数器

Question

我想在页面上添加几个按钮，单击这些按钮后，总计数器会增加 +1。但我希望这种点击效果是独一无二的：每个按钮最多只添加 +1。

我想到了这段代码，但无法让它工作。似乎问题出在为 nbbutton[y] 分配新值时。你有什么建议吗？

非常感谢！

var button = document.getElementsByClassName("clickme");
var idbutton = document.getElementById("idbutton");
var nbbutton = [0,1,2,3,4];
  count = 0;
for (var y=0;y<button.length;y++)
if (nbbutton[y] != "clicked") {
button[y].onclick = function() {
  count += 1;
  counter.innerHTML = "Total unique click: " + count;
  nbbutton[y] = "clicked";
}
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  font-size: 20pt;
  font-weight: normal;
  background: lightblue; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    -90deg,
    lightblue,
    black
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    -90deg,
    lightblue,
    black
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    -90deg,
    lightblue,
    black
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, lightblue, black); /* Standard syntax */
}

.main {
  margin: 100px auto;
  text-align: center;
}

button {
  padding: 20px;
  background: transparent;
  text-shadow: 1px 1px 1px #202020;
  font-family: "Lato", sans-serif;
  font-size: 18pt;
  border: 1px solid lightblue;
  color: lightblue;
}

<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="main">

    <h3>Click Counter</h3>
    <button class="clickme" id="idbutton">Click me</button>
        <button class="clickme" id="idbutton2">Click me too</button>
            <button id="counter">Total unique click: 0</button>

    <h5>Good practice: no JavaScript code in HTML</h5>

  </div>
</body>

</html>

Answer 1

您可以将 disabled attribute 用于按钮元素：

const ELS_button = document.querySelectorAll(".clickme");
const EL_counter = document.querySelector("#counter");
let count = 0;

const incrementCount = (ev) => {
  count += 1;
  ev.currentTarget.disabled = true; // make button disabled
  EL_counter.textContent = count;
};

ELS_button.forEach(el => {
  el.addEventListener("click", incrementCount);
});

<button class="clickme" type="button">Click me</button>
<button class="clickme" type="button">Click me too</button>
Total unique click: <span id="counter">0</span>

要设置此类元素的样式，您可以使用 CSS pseudo-class :disabled

.clickme:disabled {
  /* disabled styles here */
}

没有 `disabled` 属性

如果您不想或不能使用 disabled 属性，您总是可以直接在元素对象中存储一个状态：

const ELS_button = document.querySelectorAll(".clickme");
const EL_counter = document.querySelector("#counter");
let count = 0;

const incrementCount = (ev) => {
  if (ev.currentTarget.__clicked) return; // Do nothing if already clicked
  ev.currentTarget.__clicked = true;
  count += 1;
  EL_counter.textContent = count;
};

ELS_button.forEach(el => {
  el.addEventListener("click", incrementCount);
});

<button class="clickme" type="button">Click me</button>
<button class="clickme" type="button">Click me too</button>
Total unique click: <span id="counter">0</span>

Answer 2

您可以切换 class 并在继续递增计数器之前检查它是否存在，这只是向您现有的代码添加几行代码而不是重写它

var button = document.getElementsByClassName("clickme");
var idbutton = document.getElementById("idbutton");
var nbbutton = [0, 1, 2, 3, 4];
count = 0;
for (var y = 0; y < button.length; y++)
  button[y].onclick = function() {
    if (!this.classList.contains('alreadyClicked')) {
      count += 1;
      counter.innerHTML = "Total unique click: " + count;
      nbbutton[y] = "clicked";
      this.classList.add("alreadyClicked");
    } else {
      console.log("You've already clicked me!")
    }
  }

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  font-size: 20pt;
  font-weight: normal;
  background: lightblue;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient( -90deg, lightblue, black);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient( -90deg, lightblue, black);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient( -90deg, lightblue, black);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, lightblue, black);
  /* Standard syntax */
}

.main {
  margin: 100px auto;
  text-align: center;
}

button {
  padding: 20px;
  background: transparent;
  text-shadow: 1px 1px 1px #202020;
  font-family: "Lato", sans-serif;
  font-size: 18pt;
  border: 1px solid lightblue;
  color: lightblue;
}

<div class="main">

  <h3>Click Counter</h3>
  <button class="clickme" id="idbutton">Click me</button>
  <button class="clickme" id="idbutton2">Click me too</button>
  <button id="counter">Total unique click: 0</button>

  <h5>Good practice: no JavaScript code in HTML</h5>

</div>

创建一个多按钮唯一点击计数器

Create a multiple button unique-click counter

html

javascript

counter

没有 `disabled` 属性

创建一个多按钮唯一点击计数器

Create a multiple button unique-click counter

html

javascript

counter

没有 disabled 属性

没有 `disabled` 属性