我不能将动态创建的元素的背景颜色更改超过 2 次答案

【问题标题】：I can't change background color of dynamically created element more than 2 times我不能将动态创建的元素的背景颜色更改超过 2 次
【发布时间】：2021-03-22 02:12:01
【问题描述】：

我正在尝试列出待办事项。应该是这样的，如果我单击一个任务元素，它必须将颜色变回蓝色，如果我第二次单击它，它应该将它变回相同的颜色。我的问题是我不能将其更改为蓝色并返回超过 2 次。这是我的代码。

function getValue() {
let result = document.createElement('h4')
let att = document.createAttribute('class')

att.value = 'pId'
result.innerHTML = input.value

document.body.appendChild(result);
result.setAttributeNode(att)

// change color

let colorArr = ['blue', 'rgb(184, 58, 58)']
let i = 0

result.addEventListener('click', function() {
  result.style.backgroundColor = colorArr[i]
  i = i+1
}
)

}

【问题讨论】：

请您添加 HTML 的 sn-p 以便实际测试

标签： javascript background-color

【解决方案1】：

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

result.addEventListener('click', function() {
  result.style.backgroundColor = colorArr[i];
  i = (i + 1) % colorArr.length;//works for any number of colors
});

【讨论】：

【解决方案2】：

在单击事件监听器中，只需使用element.classList.toggle("myclass"); 将新类应用于元素。这将根据元素的类添加或删除类。

【讨论】：

【解决方案3】：

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

result.addEventListener('click', function() {
  result.style.backgroundColor = colorArr[i]
  i = i+1
  if (i >= colorArr.length) {i = 0}
}

希望不要混淆

【讨论】：