I've been attempting to create a functionality where, upon clicking a switch, a specific class gets added to every element that is assigned the class "ChangeColors". Unfortunately, I have encountered some difficulties in achieving this task. The error message received reads:
TypeError: Cannot read property 'add' of undefined
CSS
.ChangeColors {
background-color: #ff801b;
color:black;
}
.bluecolor {
background-color: blue;
color:white;
}
Javascript
function ChangeColors() {
var single = document.querySelector('.ChangeColors');
var all = document.querySelectorAll('.ChangeColors');
if (single.classList.contains('bluecolor')) {
all.forEach(element => {
element.classList.remove('bluecolor');
});
console.log("remove");
} else {
all.forEach(element => {
element.classList.add('bluecolor');
});
console.log("add");
}
}