Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

I’m ecountering errors 26 and 27. Everything seems to be correct. Any help would be appreciated.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theme Switcher</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <button id="theme-switcher-button" aria-haspopup="true" aria-expanded="false" aria-controls="theme-dropdown">
    Switch Theme</button>
    <ul id="theme-dropdown" role="menu" aria-labelledby="theme-switcher-button" hidden>
      <li role="menuitem" id="theme-light" >Light</li>
      <li role="menuitem" id="theme-dark" >Dark</li>
    </ul>
    <div id="aria-live" aria-live="polite"></div>


  <script src="./script.js"></script>
</body>
</html>


/* file: styles.css */
body {
  margin: 0;
  font-family: sans-serif;
  transition: background 0.3s, color 0.3s;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

#status {
  text-align: center;
  min-height: 20px;
}

.theme-light {
  background-color: snow;
  color: black;
}

.theme-dark {
  background-color: rgb(29, 27, 27);
  color:white;
}

/* file: script.js */
const themes = [
  { name: "light", message: "Changed to light theme" },
  { name: "dark", message: "changed to dark theme" }
];

const btn = document.getElementById("theme-switcher-button");
const menu = document.getElementById("theme-dropdown");
const msgBox = document.querySelector('[aria-live="polite"]');

btn.addEventListener("click", () => toggleMenu())

menu.addEventListener("click", (event) => {
  for(const theme of themes) {
    if(event.target.id == `theme-${theme.name}`) {
      document.body.classList.remove("theme-light", "theme-dark");
      const cName = `theme-${theme.name}`;
      document.body.classList.add(cName);
      msgBox.innerText = theme.message; 
    }
  }
  toggleMenu();
})

function toggleMenu() {
  const isHidden = menu.hidden;
  menu.hidden = !isHidden;
  btn.setAttribute("aria-expanded", isHidden);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

2

at this time there is a bug in the tests, you need to put the event listener on each li

3

Thank you. That helped.