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");
});
});
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.
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>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>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>