xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<title>Toggle Button</title>
<style>
.toggle {
width: 100px;
height: 40px;
background-color: gray;
border-radius: 20px;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.toggle.active {
background-color: green;
}
</style>
</head>
<body>
<div id="toggleButton" class="toggle" onclick="toggle()"></div>
<script>
function toggle() {
var toggleButton = document.getElementById("toggleButton");
toggleButton.classList.toggle("active");
}
</script>
</body>
</html>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="button" id="myButton" value="NO"
onclick="Buttontoggle();">
</form>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("myButton");
if(t.value=="YES"){
t.value="NO";}
else if(t.value=="NO"){
t.value="YES";}
}
</script>
</html>
xxxxxxxxxx
var clicked = false;
function toggleBtnClick() {
var img = document.getElementById('baseImg');
if (clicked) {
img.src = 'http://via.placeholder.com/350x150/e9e9e9/000000';
clicked = false;
} else {
img.src = 'http://via.placeholder.com/350x150/3fafed/000000';
clicked = true;
}
}
xxxxxxxxxx
<button id="btn"> Click </button>
<p class="demo">YES</p>
<script>
let btn = document.querySelector("#btn");
btn.addEventListener("onclick", function() {
let value = document.querySelctor("#demo").innerHTML;
if(value == "YES"){
document.querySelctor("#demo").innerHTML = "NO";
}else{
document.querySelctor("#demo").innerHTML = "YES";
}
});
</script>
xxxxxxxxxx
<input type="button" id="myButton" value="NO" onclick="Buttontoggle();">
function Buttontoggle()
{
var t = document.getElementById("myButton");
if(t.value=="YES"){
t.value="NO";
} else if(t.value=="NO"){
t.value="YES";
}
}
xxxxxxxxxx
<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<script>
const btn = document.querySelector(".form-check-input")
label = document.querySelector(".form-check-label");
btn.addEventListener("change", function() {
this.checked ? label.innerHTML = "Button Turned On" :
label.innerHTML = "Button Turned Off"
});
</script>
xxxxxxxxxx
let flag = false;
const toggle = () => {
if ( flag ) {
// insert code here when flag is on/true
} else {
// insert code here when flag is off/false
}
flag = ! flag;
}