Do you have the ability to make a toggle button with two buttons?

Asked

Viewed 244 times

1

I have a system, to change the layout of the page for a night vision layout, however for this to happen I had to use two buttons, and I think it’s better to use a toggle button to change the theme. If you can help, I’d appreciate it.

function applyTheme (theme) {
    "use strict"
	document.getElementById("mypage").className = theme;
	localStorage.setItem ("theme", theme);	
}

function applyDayTheme () {
    "use strict"

	applyTheme("day");

}

function applyNightTheme() {
        "use strict"
	applyTheme("night");

}

function addButtonLestenrs () {
        "use strict"

document.getElementById("b1").addEventListener("click", applyDayTheme);
document.getElementById("b2").addEventListener("click", applyNightTheme);

}

function initiate(){
        "use strict"

	if(typeof(localStorage)===undefined)
		alert("the application can not be executed properly in this browser");
	else{
		if(localStorage.getItem("theme")===null)
			applyDayTheme();
		else
			applyTheme(localStorage.getItem("theme"));
		
	}
	addButtonLestenrs();
}

initiate();
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="Estilos.css">
	
</head>
<body id="mypage" >
	<h1>Choose a theme</h1>
	<button id="b1">Theme day</button>
	<button id="b2">Theme night</button>
	
	
	
	<p> This is an example of use of HTML5 storage API </p>

   <div class="teste1" >
    in
</div>
   
   
    <script type="text/javascript" src="change-theme.js"></script>
</body>
</html>

.day{
color:black;
background-color:rebeccapurple;

}
.night{
color:white;
background-color:black;
}

javascript html css

2 answers

0


Puts a class for the two Buttons , type toggle-btn

function applyTheme (theme) {
   document.getElementById("mypage").className = theme;
   //localStorage.setItem ("theme", theme);	
}

function toggleThemes(){

    var day = document.getElementById('b1');  
    var night = document.getElementById('b2'); 
    
    if(day.className=="toggle-btn enabled"){
         night.className = "toggle-btn enabled";
         day.className =  "toggle-btn"
         applyTheme("night");
    } else {
         day.className = "toggle-btn enabled";
         night.className =  "toggle-btn"
         applyTheme("day");
    }

}
    .toggle-btn.enabled{
        border: 1px inset #DDD;
        background: blue;
        color: white;
    }
    .toggle-btn{
        border: none;
        padding: 5px 10px;
    }
    #mypage{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
     }
     #mypage.night{
         background: black;    
     }
<div id="mypage">
<button id="b1" class='toggle-btn enabled' onclick='toggleThemes()'>Theme day</button>
<button id="b2" class='toggle-btn' onclick='toggleThemes()'>Theme night</button>
</div>

0

An option with pure Javascript, no need for jQuery, just making a button to switch between Day and Night.

Take the example:

function myFunction() {
    var element = document.getElementById("mypage");
    element.classList.toggle("night");
}
body {
    color:black;
    background-color:rebeccapurple;
}
.night{
    color:white;
    background-color:black;
}
body.night button {
    background:blue;
}
<body id="mypage" >
    <h1>Choose a theme</h1>
    <button id="b1" onclick="myFunction()">Dia/Noite</button>

    <p> This is an example of use of HTML5 storage API </p>

    <div class="teste1" >
    in
    </div>

</body>

I know it’s not exactly what you asked for, but if you want an option using jQuery you can use the method .toggleClass("") to place and remove the class night of body just with a button like "on/off"

Take the example:

$("#b1").click(function(){
    $("#mypage").toggleClass("night");
});
body {
    color:black;
    background-color:rebeccapurple;
}
.night{
    color:white !important;
    background-color:black !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
<body id="mypage" >
    <h1>Choose a theme</h1>
    <button id="b1">Dia/Noite</button>
    
    
    
    <p> This is an example of use of HTML5 storage API </p>

    <div class="teste1" >
    in
    </div>
        
</body>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.