Question

我有一个问题，我想这样创建可点击的框（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;
}
}

能告诉我我在做什么错吗？我写的东西对吗？

所有跨度元素的功能-单击时更改颜色

0 个答案: