JavaScript Button Toggle: Code Completion
Question
Question is:
We provided some simple JavaScript template code. Your goal is to modify the application so that you can properly toggle the button to switch between an ON state and an OFF state. When the button is on and it is clicked, it turns off and the text within it changes from ON to OFF and vice versa. You are free to add classes and styles, but make sure you leave the element ID's as they are.
import $ from "jquery"
const rootApp = document.getElementById("root");
rootApp.innerHTML = '<button>ON</button>';
so what i've tried
import $ from "jquery"
function toggle(button)
{
switch(button.value)
{
case "ON":
button.value = "OFF";
break;
case "OFF":
button.value = "ON";
break;
}
}
const rootApp = document.getElementById("root");
rootApp.innerHTML = '<input type = "button" value = "ON" id = "button" onclick = "toggle();"/>'
I am new to JavaScript that's why i am here asking for help.
6 answers
solution1
0 2021-03-10 14:42:27
I think this will work....
let root = document.getElementById("root"); $(document).ready(function(){ $("#root").click(function(){ if(root.value === "on"){ root.value="off"; } else{ root.value="on"; } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" id="root" value="off">
solution2
0 ACCPTED 2021-03-10 14:46:27
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Javascript Button Toggle</title>
</head>
<body>
<h1>Javascript Button Toggle</h1>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Toggle Button</label>
</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');
const label = document.querySelector('.form-check-label');
btn.addEventListener('change', function(){
this.checked ? label.innerHTML = 'Button Turned On' : label.innerHTML = 'Button Turned Off';
});
</script>
</body>
</html>
solution3
0 2021-08-03 12:32:00
import $ from "jquery"
const rootApp = document.getElementById("root"); rootApp.innerHTML = '<button>ON</button>';
$(document).ready(function(){
$("#root").click(function(){
if(rootApp.innerHTML = '<button>ON</button>'){
rootApp.innerHTML = '<button>OFF</button>';
}else{
rootApp.innerHTML = '<button>ON</button>';
}
});
});
solution4
0 2021-10-01 20:53:54
import $ from "jquery"
const rootApp = document.getElementById("root"); rootApp.innerHTML = '<button>ON</button>';
$(document).ready(function() {
$("#root").click(function() {
(rootApp.innerHTML == '<button>OFF</button>') ?
rootApp.innerHTML='<button>ON</button>' :
rootApp.innerHTML='<button>OFF</button>';
});
});
solution5
0 2021-10-31 22:22:02
import $ from "jquery";
$(function(){
$("#btn").click(function(){
if ($("#btn").text() == "ON")
{
$("#btn").text("OFF")
}
else if ($("#btn").text() == "OFF")
{
$("#btn").text("ON")
}
}
)
})
const rootApp = document.getElementById("root");
rootApp.innerHTML = '<button id = "btn">ON</button>';
solution6
0 2022-02-26 07:31:54
import $ from "jquery"; $(document).ready(function(){ $("#root").click(function(){ if (rootApp.innerHTML === '<button>ON</button>'){ rootApp.innerHTML = '<button>OFF</button>'; } else { rootApp.innerHTML = '<button>ON</button>'; } }) }) const rootApp = document.getElementById("root"); rootApp.innerHTML = '<button>ON</button>';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Toggle Button JavaScript Code Not Working in React JS
How to toggle between two images with a button using Javascript code?
JavaScript Toggle with button
Javascript button toggle
Javascript toggle array button
make a Toggle button in javascript
javascript toggle button with css
Toggle color on button javascript
Toggle button is not working in Javascript
JavaScript to toggle button colour
Related Tags