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!

Note that there is no HTML element with the class "mainWrapper" in the HTML you've provided... — Heretic Monkey, Dec 10 '20 at 17:27
@PraneetDixit it's my website main page it's a lots of code the important part is the background color to be changed — user14775523, Dec 10 '20 at 17:30
@HereticMonkey it's my website main page it's a lots of code the important part is the background color to be changed — user14775523, Dec 10 '20 at 17:30
@user14775523 so you need to change the background color for each of the element with `mainWrapper` class? — Praneet Dixit, Dec 10 '20 at 17:32
In any case, the problem is you're using `getElementsByClassName` like it returns a single element. It doesn't, as the link in my first comment explains. — Heretic Monkey, Dec 10 '20 at 17:35
`document.getElementsByClassName` returns a collection/array so you need to iterate them - or just use jquery (as you've tagged [jquery]) - `$("#tog-bg").click(function() { $(".mainWrapper").css("background-color", this.checked ? "white" : "black")})` — freedomn-m, Dec 10 '20 at 17:37
@freedomn-m my mainWrapper is `.mainWrapper{margin:0 auto;background-color:#fff;box-shadow:0 0 10px 3px rgba(0,0,0,0.1)}` — user14775523, Dec 10 '20 at 17:39
@HereticMonkey my mainWrapper is `.mainWrapper{margin:0 auto;background-color:#fff;box-shadow:0 0 10px 3px rgba(0,0,0,0.1)}` when I change the background color it works great I just need to make the button do it , do you feel me? — user14775523, Dec 10 '20 at 17:40
Alternative possible answer: [How to get only one element by class name?](https://stackoverflow.com/questions/21436550/javascript-how-to-get-only-one-element-by-class-name/21436552) In summary: use `document.getElementsByClassName("mainWrapper")[0].style...` — freedomn-m, Dec 10 '20 at 17:41

score 0 · Answer 1 · answered Dec 10 '20 at 17:38

0

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

answered Dec 10 '20 at 17:38

JustRaman

1,101
9
11

I know this , but your code is not for a button that will SWITCH between white and black color for the mainWrapper when the user press it – user14775523 Dec 10 '20 at 17:43
1

@user14775523 you should be able to adapt what has been provided here (which matches my comment *and* the linked question) into your code... it's just a matter of adding `[0]` in two places in your code to get it to work... – freedomn-m Dec 10 '20 at 17:53
@freedomn-m i'm dumb sorry I don't know how to do it – user14775523 Dec 11 '20 at 00:32
@user14775523 fair enough - your code has this twice `document.getElementsByClassName("mainWrapper ").style.backgroundColor = ` you change both of those to this `document.getElementsByClassName("mainWrapper ")[0].style.backgroundColor = ` and you're done (you might like to copy this comment into a text editor then line up the code to see the difference - the wrapping in this comment may hide the difference) – freedomn-m Dec 11 '20 at 10:16

score 0 · Accepted Answer · answered Dec 10 '20 at 17:48

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.

your code worked!! but I need to switch between colors when button clicked@Praneet Dixit — user14775523, Dec 11 '20 at 01:03
@user14775523 What do you mean by "Switch between Colors"? Do you want to change the text color? — Praneet Dixit, Dec 11 '20 at 03:01

score 0 · Answer 3 · answered Dec 10 '20 at 17:56

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','');
    }
  };

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

3 Answers3

Related