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

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

javascript html counter

14.12.2020 11:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

784

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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>

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

— 14.12.2020 11:57

@Naga обновил еще один пример - довольно простой :)

— 14.12.2020 12:13

14.12.2020 11:36

Ответ принят как подходящий

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

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.info("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>

14.12.2020 11:45