функция для всех элементов диапазона - изменение цвета при нажатии - PullRequest
Новая
       12

функция для всех элементов диапазона - изменение цвета при нажатии

0 голосов
/ 25 марта 2019

У меня проблема, я хочу сделать кликабельные поля (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;
}
}

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

...