Are you able to do a toggle button with two buttons?

Question

Are you able to do a toggle button with two buttons?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have a system to change the layout of the page for a night vision layout, but for that 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 thank you.

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

asked by anonymous 16.05.2018 / 16:40

2 answers

0

An option with pure JavaScript, without needing jQuery, with just one button to switch between Day and Night.

See 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 requested, but if you want an option using jQuery you can use the .toggleClass("") method to place and remove the class night from body with a button of type "on/off"

See 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><bodyid="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>

16.05.2018 / 17:11

Custom Page Scrolling [Pending] Doubt - Upload page before loading

score 0 · Accepted Answer

Place 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>