我想在javascript中制作一个简单的切换按钮
我想在javascript中制作一个简单的切换按钮。然而,该按钮只会使 “OFF”,也不会回头 “ON”我想在javascript中制作一个简单的切换按钮
<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。
您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
在那里应该阻止这种情况发生。
为什么你要通过按钮,如果你要查找它?
另外,既然您知道可能的值,您只需检查它是否关闭,否则,您知道它是开启的。
// 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";}
演示在http://www.jsfiddle.net/EfjUB/1/ – gnarf 2010-06-15 18:14:25
整洁,从来没有jsfiddle之前,谢谢! – 2010-06-15 18:22:30
为什么不使用一个开关?
function toggle(button)
{
switch(button.value)
{
case "ON":
button.value = "OFF";
break;
case "OFF":
button.value = "ON";
break;
}
}
'.value' not'.Value' – gnarf 2010-06-15 18:55:07
一个布尔值的开关是一种矫枉过正。 – 2016-04-28 14:22:12
另一种方法来做到这一点:
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");
});
问候:)
<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>
总是将脚本放在head标签中,因为当页面加载时脚本首先被加载 – 2017-08-20 17:27:19
此外,如果您知道该值只能是“ON”或“OFF”,可以完全省略第二个“if”,并简单地使用“else”。 – 2010-06-15 18:06:50