How to assign css to javascript which have two or more selectors

Question

I'm trying to assign a very large block of html and css code with help of javascript. The code works properly in the day mode but I have a little issue with that when it comes to night mode. Given container and img aren't changing color and other values when night mode is turned on. What mistake did i do?

https://codepen.io/vkdatta27/pen/qBNZagr

Answer 1

It won't work using 2 parameters in your method.

document.getElementsByClassName("night profile-container")

see: getElementsByClassName() with two classes

In any case what you are doing is a bad practice, constantly changing the dom like this as its slows the browser rendering repaint. I would instead advise putting in your stylesheet and rending to the dom in one batch.

body.night .profile-container {
/* styles ...*/
}