I am trying to make a simple toggle button in javascript

Question

I am trying to make a simple toggle button in javascript. However, the button will only turn "OFF" and will not turn back "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>

I am running:HP Netbook : Ubuntu Linux 10.04 : Firefox for Ubuntu 1.0.

score 20 · Answer 1 · answered Jun 15 '10 at 18:08

Why are you passing the button if you're going to look it up?

Also, since you know the possible values, you only need to check if it's OFF, otherwise, you know it's 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";
  }
}

If you wanna get fancy and save a couple of bytes you can use the ternary operator:

function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}

score 15 · Accepted Answer · answered Jun 15 '10 at 18:05

15

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:

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";}
}

Adding the else in there should stop this happening.

answered Jun 15 '10 at 18:05

richsage

26,912
8
58
65

6

Also, if you know that the value can only be "ON" or "OFF", you can omit the second `if` completely and simply use `else`. – Ben S Jun 15 '10 at 18:06

Jesus Romero · Answer 3 · 2017-05-20T18:55:54.423

Another method to do this is:

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;
});

In the JavaScript file.

/*****

NOTE! Another way is applying a class to the element that we want to change.

The CSS file must have the class with the format we want:

.orange {
background: orange;
}

By last in our js file we only need to make the application of the class:

var button = document.querySelector("button");
button.addEventListener("click", function() {
  document.body.classList.toggle("orange");
});

Regards :)

Tester101 · Answer 4 · 2010-06-16T11:53:42.827

1

Why not use a switch?

function toggle(button) 
{
     switch(button.value)
     {
          case "ON":
               button.value = "OFF";
               break;
          case "OFF":
               button.value = "ON";
               break;
     }
}

edited Jun 16 '10 at 11:53

answered Jun 15 '10 at 18:18

Tester101

8,042
13
55
78

5

A switch for a boolean value is kind of overkill. – Maxim Daigle Apr 28 '16 at 14:22

score 0 · Answer 5 · answered Aug 20 '17 at 17:25

<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>

always put script in head tag because your scripts get loaded first when your page is load — Anshuman Sharma, Aug 20 '17 at 17:27

score -1 · Answer 6 · answered Jul 05 '22 at 12:40

-1

This will resolve your issue.

let isOn = true;
function toggle(button) {
  isOn = !isOn;
  if (isOn) {
    document.getElementById("1").value = "ON";
  } else {
    document.getElementById("1").value = "OFF";
  }
}

answered Jul 05 '22 at 12:40

Sajal Gupta

1

I am trying to make a simple toggle button in javascript

6 Answers6

Linked