Implementing a toggle switch using Bootstrap5 to control the visibility of grid lines. The setup includes adding a class to display grid lines when the toggle is true, and removing the class to hide the lines when the toggle is false. However, the issue arises when toggling the switch back on as the class does not reapply to show the lines. The coding includes using a forEach() loop to iterate through all the div elements.
Despite having console.log statements in place, triggering for each toggle, the lines do not toggle back on as expected. Below is the code snippet:
JavaScript:
let gridToggleSwitch = document.querySelector("#gridToggle")
gridToggleSwitch.addEventListener('change', () => {
let boxList = document.querySelectorAll('.box')
let toggleChoice = gridToggleSwitch.checked
if(toggleChoice == true) {
console.log("LINES")
boxList.forEach((e) => {
console.log(e)
e.classList.add('box')
})
} else if (toggleChoice == false) {
console.log('NO LINES')
boxList.forEach((e) => {
console.log(e)
e.classList.remove('box')
})
} else {
console.log('woops')
}
})
CSS:
.box {
border: 1px solid black;
}