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

Question

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

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

}

)

}

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");。这将从元素中添加或删除类，具体取决于元素是否具有该类。