счетчик, принимающий последнее увеличенное значение в Java script

#javascript

Вопрос:

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

 let counter = 0

function updateCount() {
  let progressCountUpdate = document.getElementsByClassName("progress-count")
  for (var i = 0; i < progressCountUpdate.length; i  ) {
    progressCountUpdate[i].onclick = function () {
      this.childNodes[1].innerText = counter  
    }
  }
}

function createProgress() {
  progressCount = document.createElement("div")
  progressCount.className = "progress-count"
  progressNameNew = document.createElement("span")
  progressNameNew.innerText = progresslabel.value;
  progressNameNew.className = 'progress-name'
  progressCountNumber = document.createElement("span")
  progressCountNumber.innerText = 0
  progressCountNumber.className = "progress-counter"
  progressCount.appendChild(progressNameNew)
  progressCount.appendChild(progressCountNumber)
  progressDisplay.appendChild(progressCount)
  progresslabel.value = ""
  updateCount()
}

addbutton.onclick = function () {
  if (progresslabel.value === "") {
    alert("enter progress name")
  } else {
    checkStartEndTime();
    createProgress();
  }
}

 <div class="progress-display"></div>

Как мне обеспечить, чтобы приращения были независимыми для каждого счетчика.

Ответ №1:

вы можете создать функцию закрытия, чтобы добавить счетчик к каждой отдельной onclick функции следующим образом:

 function updateCount() {
  let progressCountUpdate = document.getElementsByClassName("progress-count");

  for (let el of progressCountUpdate) {
    if (el.getAttribute('hasOnClick') !== 'true') {
      el.onclick = (function() {
        const childNode = el.childNodes[1];
        let counter = 0;

        el.setAttribute('hasOnClick', 'true'); // set a flag so it won't reset every update

        return function() {
          return childNode.innerText = counter  ;
        }
      })();
    }
  }
}

1. даже при этом при добавлении нового имени счетчика он начинается с 0, но если я сейчас попытаюсь обновить старые счетчики, он просто начинается с последнего увеличенного значения. например, новое значение счетчика = 10, старый счетчик = 21, при повторном нажатии на старый счетчик счетчик начинается с 11 и так далее.

2. Я хочу, чтобы оба счетчика имели свои собственные индивидуальные приращения

3. хорошо, я отредактировал свой ответ. Думаю, теперь я понимаю, что вы пытаетесь сделать. Если я ошибся, пожалуйста, дайте мне знать

4. спасибо, что уделили этому время, я действительно ценю это :). Что происходит сейчас, так это то, что всякий раз, когда я добавляю новый счетчик, все предыдущие счетчики сбрасываются до 1, так как приращение снова начинается с 1 . это происходит только всякий раз, когда добавляется новый счетчик, но в остальном он работает по назначению.

5. Я добавил флаг к элементу, чтобы он не сбрасывался при каждом запуске updateCount функции