Блог

У меня проблема, я хочу сделать интерактивные поля (span class =»label») вот так:

• первый щелчок = изменение фона на красный,
• второй щелчок = изменение фона на синий,
• третий щелчок = нет цвета.

Однако подсчет кликов производится не для каждого поля отдельно, а только глобально. Например, при первом нажатии на поле под номером 1 мы получаем красный цвет (это нормально), но при втором нажатии на поле под номером X оно отображается синим, но его следует засчитывать как первое нажатие на это поле.

Вторая проблема заключается в том, что после нажатия кнопки «новая задача» новые поля больше не привязываются к функции changeColor().

 My codepen: `https://codepen.io/klaudiabudzisch/pen/QooOXV `
  

Мой код:

 <section class="daily-task">
<!-------- title -------->
  <div class="header one">
    <button id="addDaily">new task</button>
    <h1>Daily Tasks</h1>
  </div>

<!-------- tasks -------->

  <div id="daily" class="task">
        <div class="task-text">
                <input type="text" class="text">
        </div>
        <div class="box-numbers">
                <span class="label">1</span>
                <span class="label">2</span>
                <span class="label">3</span>
                <span class="label">4</span>
                <span class="label">5</span>
                <span class="label">6</span>
                <span class="label">7</span>
                <span class="label">8</span>
                <span class="label">9</span>
                <span class="label">10</span>
        </div>
  </div>
</section>


 **CODE JS** 


const dailyBtn = document.getElementById("addDaily");

dailyBtn.addEventListener("click", function() {
  const boxes = document.getElementById("daily");
  const clone = boxes.cloneNode(true);
  boxes.parentNode.appendChild(clone);
 });


 let box = document.querySelectorAll("span.label");
 let clicks = 0;

 Array.from(box).forEach(e => {
  e.addEventListener('click', changeColor);
});

function changeColor() {
    clicks  ;
  if (clicks == 1) {
    this.style.backgroundColor ='red';
} if (clicks == 2) {
  this.style.backgroundColor = 'blue';
} if (clicks == 3) {
  this.style.backgroundColor = 'red';
} if (clicks == 4) {
  this.style.backgroundColor = '';
  clicks = 0;
}
}
  

Не могли бы вы, пожалуйста, сказать мне, что я делаю не так? Правильно ли то, что я написал вообще?