When toggling the switch I get these errors from the browser console. For some reason it does not work and I can't solve why this won't work I am just starting Javascript so don't me mad at me if I did something stupid.

Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
    at getValue (darkModeSwitch.js:8)
    at window.onload (index.html:17)

Uncaught TypeError: Cannot read properties of undefined (reading 'add')
    at getValue (darkModeSwitch.js:13)
    at HTMLInputElement.onclick (index.html:26)

const body = document.body
const anchor = document.getElementsByTagName("a");
const darkModeToggle = document.getElementById('darkModeToggle');

function getValue(){
  if (darkModeToggle.checked) {
      body.classList.remove("lightmode")
      anchor.classList.remove("lightmode")
      console.log("checked")
  } else{
      console.log("not checked")
      body.classList.add("lightmode")
      anchor.classList.add("lightmode")
  }
};

.lightmode{
    background-color: white;
    color: black;
}

<div>
    <ul>
        <li><a href="kapcsolat/kapcsolat.html?version=691">Kapcsolat</a></li>
        <li><a href="projects/projects.html?version=691">Projektek</li>
        <li><a class="active" href="index.html?version=692">Kezdőlap</a></li>
        <li><label class="switch"><input onclick="getValue()" id="darkModeToggle" type="checkbox" checked><span class="slider round"></span></label><script src="scripts/darkModeSwitch.js"></script>
        </li>
        <h1 class="jayden" style="float: left;"><a class="jayden" href="index.html?version=-23424893215">jayden.hu</a></h1>  
    </ul>
</div>

When toggling the switch I get these errors from the browser console. For some reason it does not work and I can't solve why this won't work I am just starting Javascript so don't me mad at me if I did something stupid.

Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
    at getValue (darkModeSwitch.js:8)
    at window.onload (index.html:17)

Uncaught TypeError: Cannot read properties of undefined (reading 'add')
    at getValue (darkModeSwitch.js:13)
    at HTMLInputElement.onclick (index.html:26)

const body = document.body
const anchor = document.getElementsByTagName("a");
const darkModeToggle = document.getElementById('darkModeToggle');

function getValue(){
  if (darkModeToggle.checked) {
      body.classList.remove("lightmode")
      anchor.classList.remove("lightmode")
      console.log("checked")
  } else{
      console.log("not checked")
      body.classList.add("lightmode")
      anchor.classList.add("lightmode")
  }
};

.lightmode{
    background-color: white;
    color: black;
}

<div>
    <ul>
        <li><a href="kapcsolat/kapcsolat.html?version=691">Kapcsolat</a></li>
        <li><a href="projects/projects.html?version=691">Projektek</li>
        <li><a class="active" href="index.html?version=692">Kezdőlap</a></li>
        <li><label class="switch"><input onclick="getValue()" id="darkModeToggle" type="checkbox" checked><span class="slider round"></span></label><script src="scripts/darkModeSwitch.js"></script>
        </li>
        <h1 class="jayden" style="float: left;"><a class="jayden" href="index.html?version=-23424893215">jayden.hu</a></h1>  
    </ul>
</div>

• javascript
• html
• css
• web

• Is that JS code const body = document.body etc - getting executed AFTER the page loads? try wrapping your variable initializations in window.addEventListener('DOMContentLoaded', () => { – Kinglish Commented Dec 17, 2021 at 21:19
• <script> window.onload = function() { getValue(); }; </script> I have it like this. – Jayden Commented Dec 17, 2021 at 21:21
• document.getElementsByTagName returns array[] of element that's why anchor.classList is undefined . You should specifically find element that you want toggle the classes. – Naren Commented Dec 17, 2021 at 21:39

5 Answers 5

The problem is not with Body but with anchor . You use getElementsByTagName which returns a List ( array ) and not a single element even though you have a single a the anchor constant value will be an array with length 1.

Either use querySelector either by ID either select first item document.getElementsByTagName("a")[0] -> not really best practice.

Or, if you have multiple anchor tags, just loop over them

See below

const body = document.body
const anchor = document.querySelectorAll("a.jayden");
const darkModeToggle = document.getElementById('darkModeToggle');

function getValue() {
  if (darkModeToggle.checked) {
    body.classList.remove("lightmode")
    anchor.forEach(a => a.classList.remove("lightmode"))
    console.log("checked")
  } else {
    console.log("not checked")
    body.classList.add("lightmode")
     anchor.forEach(a => a.classList.add("lightmode"))
  }
};

.lightmode {
  background:blue
  }
  a.lightmode {
    color: white
    }

<input onclick="getValue()" id="darkModeToggle" type="checkbox" checked />
<a class="jayden" href="#" >jayden.hu</a>
<a class="jayden" href="#" >jayden.hu</a>

The error is because you're trying to modify the classList on multiple elements at once; your anchor variable contains an array of HTML elements (all of the anchors) rather than one specific element.

Thankfully, because CSS cascades, you don't need to change the class on any elements aside from your body. Just address the a elements like this in CSS so they inherit the body's color:

function getValue() {
  document.body.classList.toggle("lightmode")
};

body {
  background-color: black;
  color: white;
}

.lightmode {
  background-color: white;
  color: black;
}

a {
  color: inherit;
}

<body>
  <ul>
    <li><a href="kapcsolat/kapcsolat.html?version=691">Kapcsolat</a></li>
    <li><a href="projects/projects.html?version=691">Projektek</a></li>
    <li><a class="active" href="index.html?version=692">Kezdőlap</a></li>
    <li><label class="switch"><input onclick="getValue()" id="darkModeToggle" type="checkbox" checked><span class="slider round"></span></label></li>
    <h1 class="jayden" style="float: left;"><a class="jayden" href="index.html?version=-23424893215">jayden.hu</a></h1>
  </ul>
</body>

Anchor is an HTML collection which should be looped through:

const body = document.body;

const anchor = document.getElementsByTagName('a');
const darkModeToggle = document.getElementById('darkModeToggle');

function getValue(){
 
if (darkModeToggle.checked) {

    console.log("checked");
    if(body.classList.contains("lightmode")){
    body.classList.remove("lightmode")
    }
   for(var a=0;a<anchor.length;a++){
    if(anchor[a].classList.contains("lightmode")){
    anchor[a].classList.remove("lightmode");
    }
   }
    
} else{

    
    console.log("not checked");
     if(!body.classList.contains("lightmode")){
    body.classList.add("lightmode")
   }
    for(var a=0;a<anchor.length;a++){
    if(!anchor[a].classList.contains("lightmode")){
    anchor[a].classList.add("lightmode");
    }
   }
}
}

  .lightmode{
    background-color: white;
    color: black;
}

<body>
<div>
        <ul>
            <li><a href="kapcsolat/kapcsolat.html?version=691">Kapcsolat</a></li>
            <li><a href="projects/projects.html?version=691">Projektek</a></li>
            <li><a class="active" href="index.html?version=692">Kezdőlap</a></li>
            <li><label class="switch"><input onclick="getValue()" id="darkModeToggle" type="checkbox" checked><span class="slider round"></span></label><script src="scripts/darkModeSwitch.js"></script>
            </li>
            <h1 class="jayden" style="float: left;"><a class="jayden" href="index.html?version=-23424893215">jayden.hu</a></h1>  
        </ul>
    </div>
    </body>

<input onclick="getValue()" id="darkModeToggle" type="checkbox" checked />
<a class="jayden" href="#" >jayden.hu</a>
<a class="jayden" href="#" >jayden.hu</a>


//Make sure the elements exist on page
const body = document.body
const anchors = document.getElementsByTagName('a');
const darkModeToggle = document.getElementById('darkModeToggle');
    
const getValue = () => {
  body.classList.toggle('lightmode'); // adds or removes class
  for (const anchor in anchors) {
    anchor.classList.toggle('lightmode'); // adds or removes class
  }
};

to apply the styling change:

  .lightmode {
    background:blue
  }
  a.lightmode {
    color: white
  }

to:

  .lightmode:link {
    background:blue
  }
  a.lightmode {
    color: white
  }