Я пытаюсь сделать простую кнопку переключения в JavaScript - PullRequest
Новая
       32

Я пытаюсь сделать простую кнопку переключения в JavaScript

6 голосов
/ 15 июня 2010

Я пытаюсь сделать простой переключатель в 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 Netbook: Ubuntu Linux 10.04: Firefox для Ubuntu 1.0.

Ответы [ 5 ]

13 голосов
/ 15 июня 2010

Почему вы передаете кнопку, если собираетесь ее искать?

Кроме того, поскольку вы знаете возможные значения, вам нужно только проверить, выключено ли оно, в противном случае вы знаете, что оно включено.

// 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";}
11 голосов
/ 15 июня 2010

Оба ваших оператора 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должно прекратить это.

1 голос
/ 15 июня 2010

Почему бы не использовать переключатель? 

function toggle(button) 
{
     switch(button.value)
     {
          case "ON":
               button.value = "OFF";
               break;
          case "OFF":
               button.value = "ON";
               break;
     }
}
0 голосов
/ 20 августа 2017 
<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 голосов
/ 20 мая 2017

Другой способ сделать это: 

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

С уважением:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...