![](/img/trans.png)
[英]I am trying to make a simple button in javascript doing two stuff
[英]I am trying to make a simple toggle button in javascript
我正在尝试在 javascript 中制作一个简单的切换按钮。 但是,按钮只会转“OFF”,不会转回“ON”
<html><head></head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
我正在运行:HP 上网本:Ubuntu Linux 10.04:适用于 Ubuntu 1.0 的 Firefox。
如果要查找它,为什么要传递按钮?
此外,由于您知道可能的值,您只需要检查它是否为 OFF,否则,您知道它为 ON。
// Toggles the passed button from OFF to ON and vice-versa.
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
如果您想花哨并节省几个字节,可以使用三元运算符:
function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}
当您更改值然后立即再次读取并将其更改回时,您的两个if
语句都将一个接一个地执行:
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
else if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
在其中添加else
应该可以阻止这种情况的发生。
另一种方法是:
var button = document.querySelector("button");
var body = document.querySelector("body");
var isOrange = true;
button.addEventListener("click", function() {
if(isOrange) {
body.style.background = "orange";
}else {
body.style.background = "none";
}
isOrange = !isOrange;
});
在JavaScript
文件中。
/*****
笔记! 另一种方法是将类应用于我们想要更改的元素。
CSS
文件必须具有我们想要的格式的类:
.orange {
background: orange;
}
最后在我们的js
文件中,我们只需要应用这个类:
var button = document.querySelector("button");
button.addEventListener("click", function() {
document.body.classList.toggle("orange");
});
问候 :)
为什么不用开关?
function toggle(button)
{
switch(button.value)
{
case "ON":
button.value = "OFF";
break;
case "OFF":
button.value = "ON";
break;
}
}
<html>
<head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF")
{
document.getElementById("1").value="ON";
}
else
{
document.getElementById("1").value="OFF";
}
}
</script>
</head>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);">
</form>
</body>
</html>
这将解决您的问题。
let isOn = true;
function toggle(button) {
isOn = !isOn;
if (isOn) {
document.getElementById("1").value = "ON";
} else {
document.getElementById("1").value = "OFF";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.