0

при клике на елемент счетчик должен считать кол-во кликов на каждый елемент, на елемент который уже был и на елемент который может быть добавлен, проблема что везде счетчик показывает 1, как можно это исправить

function ready() {

    function elemClass() {
        var container = document.querySelectorAll(".container");
        for (var i = 0; container.length > i; i++) {
            var elem = container[i].querySelectorAll(".elem");
            for (var j = 0; elem.length > j; j++) {
                var block = elem[j];
                var counter = 0;
                block.onclick = function(block, counter) {
                    counter++;
                    block.innerHTML = counter;
                }.bind(this, block, counter);
            }
        } 
    };
    elemClass();    

    document.querySelector(".btn-add").onclick = function() {
        var elem = document.createElement("div"),
            container = document.querySelector(".container");
        elem.classList.add("elem");
        container.appendChild(elem);
        elemClass(); 
    }

};
document.addEventListener("DOMContentLoaded", ready);
.container {
                display: flex;
            }
            .elem {
                width: 100px;
                height: 100px;
                margin-right: 10px;
                margin-bottom: 10px;
                color: #fff;
                background: gold;
            }
            .elem.active {
                background: blue;
            }
<div class="container">
            <div class="elem"></div>
            <div class="elem"></div>
            <div class="elem"></div>
        </div>
        <button class="btn-add">add element</button>

2 ответа 2

3

можно куда проще :)

window.addEventListener('load', function() {

  function elemClass() {
    document.querySelectorAll('.container>.elem:not([data-count])')
      .forEach(elem => {
        elem.dataset.count = 0
        elem.addEventListener('click', function(event) {
          this.dataset.count++
            this.innerHTML = this.dataset.count
        })
      })
  }
  elemClass()

  document.querySelectorAll(".btn-add")
    .forEach(btn => {
      btn.addEventListener('click', function() {
        let elem = document.createElement("div")
        let container = document.querySelector(".container")
        elem.className = 'elem'
        container.appendChild(elem)
        elemClass()
      })
    })

})
.container {
  display: flex;
}

.elem {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #fff;
  background: gold;
}

.elem.active {
  background: blue;
}
<div class="container">
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
</div>
<button class="btn-add">add element</button>

1
block.innerHTML = (block.innerHTML * 1) + counter; 

Надо было прибавлять старое значени к новому, но так как это строка, для прибавления надо строку преобразовать в число

function ready() {

  function elemClass() {
    var container = document.querySelectorAll(".container");
    for (var i = 0; container.length > i; i++) {
      var elem = container[i].querySelectorAll(".elem");
      for (var j = 0; elem.length > j; j++) {
        var block = elem[j];
        var counter = 0;
        block.onclick = function(block, counter) {
          counter++;
          block.innerHTML = (block.innerHTML * 1) + counter;
        }.bind(this, block, counter);

      }
    }
  };
  elemClass();

  document.querySelector(".btn-add").onclick = function() {
    var elem = document.createElement("div"),
      container = document.querySelector(".container");
    elem.classList.add("elem");
    container.appendChild(elem);
    elemClass();
  }

};
document.addEventListener("DOMContentLoaded", ready);
.container {
  display: flex;
}

.elem {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #fff;
  background: gold;
}

.elem.active {
  background: blue;
}
<div class="container">
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
</div>
<button class="btn-add">add element</button>

11
  • можете подсказать почему просто не срабатывает если block.innerHTML = counter
    – dmitriy
    9 ноя 2017 в 18:31
  • в ответе написал ...
    – Air
    9 ноя 2017 в 18:31
  • так ведь var counter = 0; - это ведь сразу число у нас, не много не пойму почему так
    – dmitriy
    9 ноя 2017 в 18:36
  • counter число, а вот block.innerHTML уже строка....
    – Air
    9 ноя 2017 в 18:42
  • а вот так я понял, спасибо
    – dmitriy
    9 ноя 2017 в 18:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.