title: Uncaught TypeError: Cannot read properties of undefined (reading 'style')
body: <p>I'm working on an HTML template I've two different color theme on that template dark/light. I want to create a functionality that if operating system has dark theme on then websites dark theme will be on by default but if operating system has light theme on then websites light theme will be on by default.</p>
  <p>I've multiple logos for different sections so I grabbed them by their className and loop through them to <code>display: block</code> according to the color theme by JavaScript. But I'm getting an error in console but in the website code is running perfectly it's doing the same thing I wanted.</p>
  <p>But the problem is when I'm writing my other functionalities they aren't working for this error.</p>
  <p><strong>ERROR MESSAGE</strong></p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read properties of undefined (reading 'style')</p>
  </blockquote>
  <p><strong>MY JAVASCRIPT CODE</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
  const body = document.body;
  
  function darkLogoToggle() {
    for (let i = 0; i &lt;= darkLogos.length; i++) {
      darkLogos[i].style.display = "block";
    }
  }
  
  function lightLogoToggle() {
    for (let i = 0; i &lt;= lightLogos.length; i++) {
      lightLogos[i].style.display = "block";
    }
  }
  
  if (prefersDarkScheme.matches) {
    body.classList.toggle("dark");
    darkLogoToggle();
  } else {
    body.classList.toggle("light");
    lightLogoToggle();
  }</code></pre>
  </div>
  </div>
  </p>