I am trying to make a simple toggle button in javascript. However, the button will only turn “OFF” and will not turn back “ON”
JavaScript
x
17
17
1
<html><head></head>2
<script type="text/javascript">3
function toggle(button)4
{5
if(document.getElementById("1").value=="OFF"){6
document.getElementById("1").value="ON";}7
8
if(document.getElementById("1").value=="ON"){9
document.getElementById("1").value="OFF";}10
}11
</script>12
<body>13
<form action="">14
<input type="button" id="1" value="ON" style="color:blue"15
onclick="toggle(this);">16
</form></body></html>17
I am running:HP Netbook : Ubuntu Linux 10.04 : Firefox for Ubuntu 1.0.
Advertisement
Answer
Both of your if statements are getting executed one after each other, as you change the value and then immediately read it again and change it back:
JavaScript
1
9
1
function toggle(button)2
{3
if(document.getElementById("1").value=="OFF"){4
document.getElementById("1").value="ON";}5
6
else if(document.getElementById("1").value=="ON"){7
document.getElementById("1").value="OFF";}8
}9
Adding the else in there should stop this happening.