classList.remove and .add not working for some reason

Question

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;
}


    
        Kapcsolat
        Projektek

        Kezdőlap
        
        
        jayden.hu

user_4573410 · Answer

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;
}


  
    Kapcsolat
    Projektek
    Kezdőlap
    
    jayden.hu

user_6441124 · Answer

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
    }


jayden.hu
jayden.hu

user_17460546 · Answer

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


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


        
            Kapcsolat
            Projektek
            Kezdőlap
            
            
            jayden.hu

user_127829 · Answer


jayden.hu
jayden.hu


//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
  }
};

user_17818042 · Answer

to apply the styling change:

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

to:

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

classList.remove and .add not working for some reason

5 Answers