Как включить и выключить лампочку в JavaScript? - PullRequest
Новая
       25

Как включить и выключить лампочку в JavaScript?

2 голосов
/ 12 мая 2019

Я делаю функцию в javascript, которая должна изменить src элемента html, чтобы казалось, что элемент html (лампочка) включается и выключается. Он включает в себя оператор if else if, чтобы проверить, выключена ли лампа или уже включен, а затем поворачивает ее в противоположную сторону. Функция отключается кнопкой.

Моя проблема в том, что когда я нажимаю на кнопку, она включает лампочку, но когда я нажимаю на нее снова, она выключается. Почему это происходит? Я не получаю сообщений об ошибках из консоли.

Вот мой код: 

<!DOCTYPE html>
<html>
<head>
  <style>
    button {
      background-color: white;
      border-radius: 0.25px;
      border-color: black;
      height: 30px;
     }
   </style>
 </head>
 <body>

   <button id = "button" onclick="light(on)"></button>

   <img id="myImage" src="file:///C://Users/xenia/Downloads/light-bulb-off- 
 pixilart.png">

   <script>
     var on = 0; // 1 is true, 0 is false

     function light(on) {
       if (on == 0) {
         document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
         t-bulb-on-pixilart.png"
         on = 1
        }
        else if (on == 1){
          document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh 
         t-bulb-off-pixilart.png"
         on = 0
       }
      }
    </script>
</body>
</html>

Ответы [ 4 ]

3 голосов
/ 12 мая 2019

Вы используете глобальную переменную, но передаете значение для локальной переменной внутри функции.Тогда изменение этой переменной не влияет на глобальное значение, потому что значения примитивов передаются по значению.

Вам необходимо изменить эту строку на (без on) 

<button id = "button" onclick="light()"></button>

исигнатура функции, без переменной 

function light() {

Теперь вы получаете доступ к глобальной переменной on и меняете значение.

Еще один совет, вы можете принять логическое значение (true или false) и пропустите проверку в операторе if, используя переменную напрямую, и пропустите вторую проверку, поскольку у вас есть только два значения.

Возможно, вы могли бы опустить вторую проверку с помощьючисловое значение, потому что у вас нет кода, который присваивает значение, отличное от 0 или 1.

1 голос
/ 12 мая 2019

Глобальные переменные не изменяются при изменении значений локальных переменных внутри функции.Ознакомьтесь с правилами области видимости в документации языка, чтобы понять это.Когда вы включаете его, значение изменяется, но функция выключения не будет работать, потому что вы не меняете глобальную переменную.

1 голос
/ 12 мая 2019 
<!DOCTYPE html>
<html>
<head>
  <style>
    button {
      background-color: white;
      border-radius: 0.25px;
      border-color: black;
      height: 30px;
     }
   </style>
 </head>
 <body>

   <button id = "button" onclick="light();"></button>

   <img id="myImage" src="file:///C://Users/xenia/Downloads/light-bulb-off- 
 pixilart.png">

   <script>
     var on = 0; // 1 is true, 0 is false

     function light() {
       if (on == 0) {
         document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
         t-bulb-on-pixilart.png"; //You forgot a ; here
         on = 1; //You forgot a ; here
        }
        else if (on == 1){document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/light-bulb-off-pixilart.png"; //You forgot a ; here
         on = 0; //You forgot a ; here
       }
      }
    </script>
</body>
</html>
  • Не забудьте использовать ; .Вот почему ваш скрипт останавливается!
  • Вы можете написать его проще так: light ()
0 голосов
/ 12 мая 2019

На этот вопрос уже дан ответ, но некоторый псевдокод, который демонстрирует и проясняет проблему: 

bool globalVar = false
func changeState(bool localVar) {
   localVar = !localVar
}

Где 

changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar

Будет выводить 

false
false
false

И что вы хотите: 

bool globalVar = false
func changeState() {
   globalVar = !globalVar
}

Где 

changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar

Будет выводить 

true
false
true
...