JavaScript, выполняющий оба оператора if

ProgramBox

JavaScript, выполняющий оба оператора if

Post author:admin
Запись опубликована:19 августа, 2022
Post category:Вопросы по программированию

#javascript

Вопрос:

Я новичок в веб-разработке и программировании. На моей веб-странице есть две кнопки. Я пытался изменить цвет кнопок на основе текстового значения в переменной «что-то», как вы можете видеть в коде. Но когда я запускаю этот код, выполняются оба оператора if, и обе кнопки (кнопка 1 и кнопка 2) становятся зелеными вместо одной. Любая помощь приветствуется.

(ПРИМЕЧАНИЕ: даже «=== » и «==» для меня не работают), и у меня есть скрипт, который изменяет значение для чего-то. Таким образом, при нажатии кнопки 1 или кнопки 2 переменная «что-то» автоматически обновляется с включенными или выключенными индикаторами в текстовом формате.

РЕДАКТИРОВАТЬ: пожалуйста, проверьте полностью обновленный код

 <script type="text/javascript">

var something="Lights Turned Off";
window.onload=ChangeColor();

function Lighton(){
    document.getElementById('button1').style.backgroundColor = 'green';
}


function Lightoff(){
    document.getElementById('button2').style.backgroundColor = 'green'; 
}

function ChangeColor()  { 
    var something="Lights Turned Off";

    if (something= "Lights Turned Off"){
        console.log("inside Off function");
        Lightoff();
    }
    
    if (something= "Lights Turned On"){
        console.log("inside On function");
        Lighton();
    }     

}

</script>

ПОЛНЫЙ КОД:

 
<!DOCTYPE html>
<html lang="en">
<head>



<?php

$myfile = "./newfile.txt";

$doc1 =file_get_contents($myfile);

echo $doc1;  // doc1 has the value inside newfile.txt 
             //  ( ie Lights Turned On OR Lights Turned off)
 
?>




<style>

.button {

  box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
  margin-top: 280px;
  margin-left: 420px; 
  background-color:rgb(128, 128, 128); 
  border: none;
  color: white;
  padding: 30px 35px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
}
  
</style>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-UA-Compatible" content="ie=edge">
  <title>Document ltd</title>
   
</head>




<body>

<div style = "position:fixed; left:-300px; top:-100px;">


    <form method="get" action="http://xxxxxx/ab/my.php" >
    <button class="button"  id="button1">Lights On</button>
    </form>

    <form method="get" action="http://xxxxxx/ab/my1.php" >
    <button class="button"  id="button2">Lights Off</button>
    </form>


</div>






<script type="text/javascript">


var something=<?php echo json_encode($doc1); ?>; //takes what's inside doc1.


function Lighton(){

document.getElementById('button1').style.backgroundColor = 'green';

}




function Lightoff(){

document.getElementById('button2').style.backgroundColor = 'green'; 

}




function ChangeColor()  { 

             

         if (something=="Lights Turned Off"){

         Lightoff();

         console.log("inside Off function");

         }


       if (something=="Lights Turned off"){

        
       Lighton();

       console.log("inside On function");


         }
        


}

window.onload=ChangeColor();




</script>
</body>
</html>

1. «=» <> «==» или «===»! Пожалуйста, прочтите это: сравнения равенства и одинаковости, mdn.com

2. Кроме того, я замечаю, что something это снова определяется в ChangeColor() функции таким образом, что оно всегда будет соответствовать оператору Lightoff() if.

3. Хорошо, итак, я протестировал его с полным кодом, и есть две проблемы: 1. вы используете один знак равенства вместо двух, и 2. вы переопределяете something переменную внутри ChangeColor() функции, поэтому объявление снаружи не имеет значения. Решение состоит в том, чтобы использовать два знака равенства в обоих операторах if и удалить дополнительное something объявление внутри ChangeColor() .

4. Привет, ты видел полностью обновленный код, который я опубликовал. Я внес все эти изменения, но все равно это не работает. Спасибо

Ответ №1:

Чтобы проверить, равна ли переменная другому выражению, вы должны использовать тройное равное или двойное равное, например:

 if (something === "Lights Turned Off") {

  console.log("inside Off function");

  Lightoff();

}


if (something === "Lights Turned On") {

  console.log("inside On function");

  Lighton();

}

Развернуть фрагмент

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

Показать фрагмент кода

 var isLightOn = false;
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
window.onload = ChangeColor();


function lightOn() {
  isLightOn = true;
  button1.style.backgroundColor = 'green';
}

function lightOff() {
  isLightOn = false;
  button2.style.backgroundColor = 'green';
}

function ChangeColor() {
  if (!something) {
    console.log("inside Off function");
    lightOff();
  } else {
    console.log("inside On function");
    lightOn();
  }
}

Развернуть фрагмент

1. Эй, я тоже это пробовал. Но когда я это делаю, цвета не будут отображаться на кнопке

2. Эй, даже когда я пытаюсь, загорается только кнопка «Горит». Почему вы не определили, что такое «что-то» в этом коде? извините, если я ошибаюсь. В реальном коде у меня есть текстовый файл, и мой php получает значение, которое находится внутри этого текстового файла. Текстовый файл имеет значение «Свет включен или свет выключен» в зависимости от нажатой кнопки. Затем мой javascruipt принимает значение, которое дает php, и помещает его во что-то. var something=<?php echo json_encode($doc1); ?>; , теперь у «чего-то» включены ИЛИ выключены индикаторы.

3. Не могли бы вы поделиться всем соответствующим кодом в своем вопросе, пожалуйста?

4. Привет, я обновил вопрос и опубликовал полный код. Большое спасибо

Ответ №2:

Когда вы используете оператор if, вы не используете один знак = . Вместо этого вы используете два или три знака равенства (== или ===). Один = представляет присваивания, в то время как два или три представляют сравнение. Вы должны заменить свой код оператора if следующим образом:

 if (something== "Lights Turned Off"){
         console.log("inside Off function");
         Lightoff();
} else if (something== "Lights Turned On"){
         console.log("inside On function");
         Lighton();
}

1. Эй, я попробовал их оба, но теперь цвет не отображается ни на каких кнопках

2. Это странно. Что-нибудь регистрируется в консоли?

3. Это не странно, вы не меняетесь something

4. Что вы имеете в виду? something определяется в коде OP

5. Поэтому, когда я ставлю «=», цвета появляются на обеих кнопках, т. Е. Оба параметра запущены. Если я помещаю (==) или (===), на кнопках не отображается цвет, т. Е. Ничего не выполняется

Ответ №3:

Как насчет

 if (something== "Lights Turned Off"){ 
console.log("inside Off function");
 Lightoff(); 
} else if (something== "Lights Turned On"){ 
console.log("inside On function");
 Lighton(); 
}

1. В этом случае первое условие (выключенный свет) всегда будет оцениваться как true, потому что вместо оператора сравнения == был случайно использован один знак = (представляющий присваивание).

2. О, я даже этого не видел, мой плохой

3. Эй, я пробовал это, будет работать только lightoff(), а цвет просто останется там. Даже если я изменю значение «что-то» на «Свет включен», это просто вызовет отключение света (). ИТАК, в основном, когда я нажимаю lights off, другой цвет по-прежнему имеет цвет. Большое спасибо

Метки: javascript, выполняющий оба оператора if