Блог

Главная - Вопросы по программированию - Создание счетчика уникальных нажатий на несколько кнопок

Создание счетчика уникальных нажатий на несколько кнопок

#javascript #html #counter

#javascript #HTML #счетчик

Вопрос:

Я бы хотел, чтобы на странице было несколько кнопок, которые при нажатии добавляли 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>

Ответ №1:

Вы можете переключить класс и проверить его существование, прежде чем продолжить и увеличить счетчик, это делается для того, чтобы добавить всего несколько строк кода к существующему коду, а не переписывать его

 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>

Ответ №2:

Вы могли бы использовать disabled атрибут для элемента button:

 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 :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>

Комментарии:

1. Спасибо! Однако мне не нужно было бы отключать кнопку, поскольку они мне нужны и для других действий. Ответ от Ислама лучше всего подходит в моем случае

2. @Naga обновлен другим примером — довольно простым 🙂