发表新帖
发表新帖

I am trying to make a simple toggle button in javascript

后端 未结
关注
5 1380
迷失自我
迷失自我 2020-12-19 04:28

I am trying to make a simple toggle button in javascript. However, the button will only turn \"OFF\" and will not turn back \"ON\"

&l
相关标签:
5条回答
  • 北海茫月
    2020-12-19 04:49 
    <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>
    0 讨论(0)
  • 闹比i
    2020-12-19 04:51

    Why not use a switch?

    function toggle(button) 
{
     switch(button.value)
     {
          case "ON":
               button.value = "OFF";
               break;
          case "OFF":
               button.value = "ON";
               break;
     }
}
    0 讨论(0)
  • 后悔当初
    2020-12-19 04:56

    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.

    0 讨论(0)
  • 不要未来只要你来
    2020-12-19 05:03

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

    0 讨论(0)
  • 不知归路
    2020-12-19 05: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";}
    0 讨论(0)
 看不清?
提交回复
热议问题