0

我有一个问题，我想制作这样的可点击框（span class="label"）：

  • 第一次单击 = 将背景更改为红色，
  • 第二次点击=背景变为蓝色，
  • 第三次点击=没有颜色。

然而，计算一次点击并不是在每个盒子上单独计算，而是在全局范围内计算。比如第一次点击1号框，我们有一个红色的颜色（这样OK），但是第二次点击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;
}
}

你能告诉我我做错了什么吗？我写的完全正确吗？

4

0 回答 0