Create a multiple button unique-click counter

user_14742193 0
Viewed 553

I'd like to have few buttons on a page that when clicked, add a +1 to a total counter. But I want this click effect to be unique: only add max +1 per button.

I thought of this code but can't get it to work. It seems that the issue is when assigning a new value to nbbutton[y]. Do you have any suggestions?

Thanks a lot !

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>

counter html javascript
2 Answers

You could use the disabled attribute for a button element:

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>

To style such element you can than use the CSS pseudo-class :disabled

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

Without the disabled attribute

If you don't want or cannot use the disabled attribute, you can always store a a state directly inside the Element Object:

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>

user_3839040

You could toggle a class and check for it's existance before going ahead and incrementing the counter, this is to only add a few lines of code to your existing code and not rewriting it

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>

user_99424180
Related