Switching between two background colors of a web page with CSS Switch

Question

my code works fine I just need to switch between two colors white and black I need help to modify the JavaScript code to turn switch between white and black colors. -CSS

  <style> 
        h1 { 
            color: green; 
        } 
                
        /* toggle in label designing */ 
        .toggle {
            float: none;
            position : fixed ; 
            display : inline-block; 
            width: 80px;
            height: 38px;
            background-color: grey; 
            border-radius: 30px; 
            border: 2px solid white;
            top: 6px;
            left: 896px;
            
        }   
                
        /* After slide changes */ 
        .toggle:after { 
            content: &#39;&#39;; 
            position: absolute; 
            width: 38px;
            height: 35px; 
            border-radius: 50%; 
            background-color: white; 
            top: -1px; 
            left: 0px;
            
            transition: all 0.5s; 
        } 
                
        /* Toggle text */ 
        p { 
            font-family: Arial, Helvetica, sans-serif; 
            font-weight: bold; 
        } 
                
        /* Checkbox cheked effect */ 
        .checkbox:checked + .toggle::after { 
            left : 38px; 
        } 
                
        /* Checkbox cheked toggle label bg color */ 
        .checkbox:checked + .toggle { 
            background-color: #5ad94d; 
        } 
                
        /* Checkbox vanished */ 
        .checkbox { 
            display : none; 
        } 
    </style>

-HTML

       <input class='checkbox' id='switch' type='checkbox'/> 
        <label class='toggle' for='switch'> 
            <p>ON   OFF</p> 
        </label> 

-Javascript

<script>

document.getElementById(&quot;switch&quot;).addEventListener(&#39;click&#39;, function(){
    document.getElementsByClassName(&quot;mainWrapper fullWidth&quot;)[0].style.backgroundColor = document.getElementById(&quot;switch&quot;).toggle ? &quot;white&quot; : &quot;black&quot;;
});
    </script> 

again my code works fine I just need to switch between two colors white and black I need help to modify the JavaScript code to turn switch between white and black colors. any ideas ??? thank!

Answer 1

getElementByClassName returns collection

So code should be

//add [0] to both getElementByClassName
document.getElementsByClassName("mainWrapper")[0].style.backgroundColor

Also there isn't any class mainWrapper here so you should create a parent div with class mainWrapper

Answer 2

getElementsByClassName() returns an html collection object. It is a collection. If you want to find the first element with the class, you need to use the index [0] like below -

document.getElementById("tog-bg").addEventListener('click', function(){
    document.getElementsByClassName("mainWrapper")[0].style.backgroundColor = document.getElementById("tog-bg").checked ? "white" : "black";
});

If you want to do this for all elements with the specified class, then you can loop it like below -

document.getElementById("tog-bg").addEventListener('click', function(){
    for(let i = 0; i < document.getElementsByClassName("mainWrapper").length; i++){
        document.getElementsByClassName("mainWrapper")[i].style.backgroundColor = document.getElementById("tog-bg").checked ? "white" : "black";
    }
});

I am using the ternary operator instead of if else condition in the above snippet. Also, I have replaced the change event with click event in the listener.

Answer 3

This worked for me in firefox (not styled, but functional) :

document.getElementById("tog-bg").onclick = function(){
      var e;
    if( (e = document.getElementById("tog-bg")).hasAttribute('checked')) {
      var w = document.getElementsByClassName("mainWrapper ");
      for(i=0;i<w.length;++i)
      {
        w[i].style.backgroundColor = "black";
      }
      e.removeAttribute('checked');
    } else {
      var w = document.getElementsByClassName("mainWrapper ");
      for(i=0;i<w.length;++i)
      {
        w[i].style.backgroundColor = "white";
      }
      e.setAttribute('checked','');
    }
  };