I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created:
let classList = event.currentTarget.classList;
if (classList[0] === 'open'){
classList[0] = 'close';
event.currentTarget.classList = classList;
return;
}
let siblingList = event.currentTarget.parentElement.children;
for (let i=0;i<siblingList.length;i++){
classList = siblingList[i].classList;
if (classList[0] === 'open') {
classList[0] = 'close';
siblingList[i].classList = classList;
break;
}
}
classList = event.currentTarget.classList;
if (classList[0] === 'close'){
classList[0] = 'open';
event.currentTarget.classList = classList;
}
This function worked well when dealing with a single class and using className instead of classList. However, after switching to classList, it no longer functions as expected and throws the error message below:
Uncaught TypeError: Failed to set an indexed property on 'DOMTokenList': Index property setter is not supported.