javascript - Uncaught TypeError: Cannot read properties of undefined (reading 'style') - Stack Overflow

admin管理员组

文章数量:1414879

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.

I've multiple logos for different sections so I grabbed them by their className and loop through them to display: block 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.

But the problem is when I'm writing my other functionalities they aren't working for this error.

ERROR MESSAGE

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

MY JAVASCRIPT CODE

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const body = document.body;

function darkLogoToggle() {
  for (let i = 0; i <= darkLogos.length; i++) {
    darkLogos[i].style.display = "block";
  }
}

function lightLogoToggle() {
  for (let i = 0; i <= lightLogos.length; i++) {
    lightLogos[i].style.display = "block";
  }
}

if (prefersDarkScheme.matches) {
  body.classList.toggle("dark");
  darkLogoToggle();
} else {
  body.classList.toggle("light");
  lightLogoToggle();
}

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.

I've multiple logos for different sections so I grabbed them by their className and loop through them to display: block 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.

But the problem is when I'm writing my other functionalities they aren't working for this error.

ERROR MESSAGE

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

MY JAVASCRIPT CODE

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const body = document.body;

function darkLogoToggle() {
  for (let i = 0; i <= darkLogos.length; i++) {
    darkLogos[i].style.display = "block";
  }
}

function lightLogoToggle() {
  for (let i = 0; i <= lightLogos.length; i++) {
    lightLogos[i].style.display = "block";
  }
}

if (prefersDarkScheme.matches) {
  body.classList.toggle("dark");
  darkLogoToggle();
} else {
  body.classList.toggle("light");
  lightLogoToggle();
}

• javascript
• html
• css

Share Improve this question Follow edited Sep 27, 2021 at 15:36 Heretic Monkey 12.1k77 gold badges6161 silver badges131131 bronze badges asked Sep 27, 2021 at 15:21 Fuhad HasanFuhad Hasan 5322 gold badges22 silver badges99 bronze badges 5

• Probably, one of your logo is missing. Can you log all your logos like console.log(darkLogos[i]) and console.log(lightLogos[i]) ? – ronaldtgi Commented Sep 27, 2021 at 15:26
• 1 Array indexing starts from zero, you're iterating past the last index. – Teemu Commented Sep 27, 2021 at 15:27
• can you please share the content of darkLogos. Based on the error you have shared it seems that darkLogos[i] is undefined. – Avinash Chandra Commented Sep 27, 2021 at 15:29
• 1 Yea, you should change <= to < as @Teemu mention. – ronaldtgi Commented Sep 27, 2021 at 15:29
• Does this answer your question? for loop undefined 'error' – Heretic Monkey Commented Sep 27, 2021 at 15:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You need to iterate till last element only. So, correct condition should be i < darkLogos.length and i < lightLogos.length

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const body = document.body;
  
function darkLogoToggle() {
  for (let i = 0; i < darkLogos.length; i++) {
    darkLogos[i].style.display = "block";
  }
}

function lightLogoToggle() {
  for (let i = 0; i < lightLogos.length; i++) {
    lightLogos[i].style.display = "block";
  }
}

if (prefersDarkScheme.matches) {
  body.classList.toggle("dark");
  darkLogoToggle();
} else {
  body.classList.toggle("light");
  lightLogoToggle();
}

本文标签： javascriptUncaught TypeError Cannot read properties of undefined (reading 39style39)Stack Overflow