How do I change the background color of my burger menu by clicking on an icon?
This is the CSS code I have:
:root{
--pseudo-backgroundcolor: yellow;
}
.menu__icon span,
.menu__icon::before,
.menu__icon::after{
background: var(--pseudo-backgroundcolor);
}
And this is the JavaScript code:
const iconMenu = document.querySelector('.menu__icon');
const root = document.querySelector(":root");
let styleRoot = window.getComputedStyle(root)
let valueProp = styleRoot.getPropertyValue("--pseudo-backgroundcolor")
if (iconMenu) {
const menuBody = document.querySelector('.menu__body');
iconMenu.addEventListener("click", function (e) {
document.body.classList.toggle('_lock');
iconMenu.classList.toggle('_active');
menuBody.classList.toggle('_active');
switch (valueProp) {
case 'yellow':
root.style.setProperty("--pseudo-backgroundcolor", 'white');
break
case 'white':
root.style.setProperty("--pseudo-backgroundcolor", 'yellow');
}
})
}
Alternatively, you can use if/else statements:
if (valueProp == 'white') {
root.style.setProperty("--pseudo-backgroundcolor", 'yellow');
}
if (valueProp == 'yellow') {
root.style.setProperty("--pseudo-backgroundcolor", 'white');
}
I'm having trouble understanding why the switch and if/else constructions are not working. The function doesn't seem to recognize it.