函數式編程
2023-11-12 14:29:25
我正在嘗試列出待辦事項清單。應該是這樣的,如果我單擊任務元素,它必須將顏色更改回藍色,如果我第二次單擊它,它應該將其更改回相同的顏色。我的問題是我不能將其更改為藍色并返回兩次以上。這是我的代碼。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})}
3 回答

眼眸繁星
TA貢獻1873條經驗 獲得超9個贊
您可以使用求余運算符將索引重置回第一個索引;否則,它將不斷增加索引超過數組的長度。
result.addEventListener('click', function() {
result.style.backgroundColor = colorArr[i];
i = (i + 1) % colorArr.length;//works for any number of colors
});

慕姐4208626
TA貢獻1852條經驗 獲得超7個贊
顏色只改變兩次的原因是,一旦i變得大于列表中的項目數,就不會再分配更多的顏色i。所以為了達到想要的結果,用這個代替
result.addEventListener('click', function() {
result.style.backgroundColor = colorArr[i]
i = i+1
if (i >= colorArr.length) {i = 0}
}
希望它不會令人困惑

GCT1015
TA貢獻1827條經驗 獲得超4個贊
在單擊事件偵聽器中,只需使用 向元素應用一個新類element.classList.toggle("myclass");
。這將從元素中添加或刪除類,具體取決于元素是否具有該類。
添加回答
舉報
0/150
提交
取消