问题是：
我们提供了一些简单的JavaScript模板代码。您的目标是修改应用程序，以便您可以正确地切换按钮以在ON状态和OFF状态之间切换。当按钮打开并被单击时，它将关闭，其中的文本将从打开变为关闭，反之亦然。您可以自由添加类和样式，但要确保保持元素ID的原样。
import $ from "jquery"
const rootApp = document.getElementById("root");
rootApp.innerHTML = '<button>ON</button>';
所以我所尝试的
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();"/>'
我是JavaScript的新手，这就是我在这里寻求帮助的原因。
<!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>
我想这会管用的....
null
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">