我无法更改动态创建元素的背景颜色超过 2 次

Question

我正在尝试列出待办事项清单。应该是这样的，如果我单击任务元素，它必须将颜色更改回蓝色，如果我第二次单击它，它应该将其更改回相同的颜色。我的问题是我不能将其更改为蓝色并返回两次以上。这是我的代码。function getValue() {let result = document.createElement('h4')let att = document.createAttribute('class')att.value = 'pId'result.innerHTML = input.valuedocument.body.appendChild(result);result.setAttributeNode(att)// change colorlet colorArr = ['blue', 'rgb(184, 58, 58)']let i = 0result.addEventListener('click', function() {  result.style.backgroundColor = colorArr[i]  i = i+1})}

Answer 1

您可以使用求余运算符将索引重置回第一个索引；否则，它将不断增加索引超过数组的长度。

result.addEventListener('click', function() {

  result.style.backgroundColor = colorArr[i];

  i = (i + 1) % colorArr.length;//works for any number of colors

});

Answer 2

颜色只改变两次的原因是，一旦i变得大于列表中的项目数，就不会再分配更多的颜色i。所以为了达到想要的结果，用这个代替

result.addEventListener('click', function() {

  result.style.backgroundColor = colorArr[i]

  i = i+1

  if (i >= colorArr.length) {i = 0}

}

希望它不会令人困惑

Answer 3

在单击事件侦听器中，只需使用 向元素应用一个新类element.classList.toggle("myclass");。这将从元素中添加或删除类，具体取决于元素是否具有该类。