'Javascript night mode - Click function that changes background color

I'm coding a website and I want to be able to switch between day mode and nigth mode. It's not working, I need help here. Thank you in advance.

HTML

<div>
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
    <i class="fas fa-moon"></i>
    <i class="fas fa-sun"></i>
    <div class="ball"></div>
</label>

Script

$(document).ready(function(){
  $("#chk").click(function(){
    $("body").css("background-color", "black");
  });
});
javascriptjquerycss


Solution 1:[1]

In your method, when the <input> element's click event fires, the <body> element's background color is constantly assigned black; this behavior does not create a toggle effect.

Method-1

You can switch between day and night modes using the change event of the <input> element:

$(document).ready(function(){
  function changeColor(newBgColor) {
    $("#sun").css({color: newBgColor});
    $("#moon").css({color: newBgColor});
  }

  /* When the <input> element's change event fires */
  $('#chk').change(function() {
    if(this.checked) {
      $("body").css("background-color", "black");
      changeColor("white");
    }
    else {
      $("body").css("background-color", "white");
      changeColor("black");
    }
  });  
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="checkbox" class="checkbox" id="chk" />
  
  <label class="label">
      <i id="moon" class="fas fa-moon"></i>
      <i id="sun" class="fas fa-sun"></i>
      <div class="ball"></div>
  </label>
</div>
Method-2

You can get around this by giving the <i> elements an id.

$(document).ready(function(){
  function changeColor(newBgColor) {
    $("#sun").css({color: newBgColor});
    $("#moon").css({color: newBgColor});
  }
  
  /* Fires when clicking <i> with id value of "sun" */
  $("#sun").click(function(){
    $("body").css("background-color", "black");
    changeColor("white");
  });
  
  /* Fires when clicking <i> with id value of "moon" */
  $("#moon").click(function(){
    $("body").css("background-color", "white");
    changeColor("black");
  });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <label class="label">
      <i id="moon" class="fas fa-moon"></i>
      <i id="sun" class="fas fa-sun"></i>
      <div class="ball"></div>
  </label>
</div>

Solution 2:[2]

You can use a css rule to make the background black (.black) and use toggleClass() to make it work

$(document).ready(function(){
  $("#chk").click(function(){
    $("body").toggleClass('black');
  });
});
.black { background-color:#000 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
    <i class="fas fa-moon"></i>
    <i class="fas fa-sun"></i>
    <div class="ball"></div>
</label>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 SKJ

Related Questions