2016-03-09 13 views
-1

Я не знаю, почему, как кажется, все правильно, и в консоли нет ошибок. Он всегда начинается на green.png и остается там? Я пытаюсь сделать последовательность синхронизированного светофора, которая может начинаться, как только страница загружается без кнопки.Что происходит с моей программой Traffic Lights?

<!DOCTYPE html> 
<html> 
<head> 
</head> 
    <body> 
     <h2>Traffic Lights Program</h2> 
     <div class="light"><img src="Blank.png" style="width:100px;height:228px;"/></div> 

     <script> 
     trafficLight = "green"; 
     var trafficLights = ["Red.png","RedYellow.png","Yellow.png","Green.png"] 
     function green() { 
      document.images[0].src = trafficLights[3]; 
     } 

     function yellow() { 
      document.images[0].src = trafficLights[3]; 
     } 

     function redYellow() { 
      document.images[0].src = trafficLights[1]; 
     } 

     function red() { 
      document.images[0].src = trafficLights[0]; 
     } 

     function yellow2() { 
      document.images[0].src = trafficLights[2]; 
     } 

     function automatic() { 
      if (trafficLight = "green") { 
       setTimeout(green(),500) 
       var trafficLight = "yellow"; 
      } else if (trafficLight = "yellow") { 
       setTimeout(yellow(),500) 
       var trafficLight = "redYellow"; 
      } else if (trafficLight = "redYellow") { 
       setTimeout(redYellow(),500) 
       var trafficLight = "red"; 
      } else if (trafficLight = "red") { 
       setTimeout(red(),500) 
       var trafficLight = "yellow2";  
      } else { 
       setTimeout(yellow2(),500) 
       var trafficLight = "green"; 
      } 
     } 

     setInterval(automatic(),1000) 
    </script> 
    </body> 
</html> 
+3

Вы '' вместо '==' в если заявления =. Затем вы объявляете каждый «trafficLight» локальной переменной. –

+0

Кроме того, вы не должны повторно объявлять trafficLight внутри каждого из ваших операторов if. Итак, первый, например, должен читать 'if (trafficLight ==" green ") {setTimeout (green(), 500); trafficLight = "yellow"; ' – jmcgriz

ответ

1

Ни один из ваших условных не выполняется, как вы задумали, так как они созданы с помощью оператора присваивания «=», а не оператор сравнения «==».

+0

Я внес соответствующие изменения с переменными и добавил сравнительные операторы. однако я все еще считаю его green.png и остаюсь таким, как это связано с тем, как я его структурировал, или я неправильно использую команды? –

+0

Nevermind получил его работу, спасибо! –

1

Я очищены ваш код немного:

function automatic() { 
    if (trafficLight == "green") { 
     setTimeout(green,500); 
     trafficLight = "yellow"; 
    } else if (trafficLight == "yellow") { 
     setTimeout(yellow,500); 
     trafficLight = "redYellow"; 
    } else if (trafficLight == "redYellow") { 
     setTimeout(redYellow,500); 
     trafficLight = "red"; 
    } else if (trafficLight == "red") { 
     setTimeout(red,500); 
     trafficLight = "yellow2";  
    } else { 
     setTimeout(yellow2,500); 
     trafficLight = "green"; 
    } 
} 

var interval = setInterval(automatic,1000); 
  1. Не переобъявить ВАР с var несколько раз.
  2. Используйте оператор == для операторов.
  3. Не используйте скобки (), если вы используете именованную функцию как обработчик.
+0

Ах, спасибо, я не понимал о вашей третьей точке. –

0

это работающий и протестированный. включает все предыдущие комментарии.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
    <body> 
 
     <h2>Traffic Lights Program</h2> 
 
     <div class="light"><img src="Blank.png" style="width:100px;height:228px;"/></div> 
 

 
     <script> 
 
     trafficLight = "green"; 
 
     var trafficLights = ["Red.png","RedYellow.png","Yellow.png","Green.png"] 
 
     function green() { 
 
      document.images[0].src = trafficLights[3]; 
 
     } 
 

 
     function yellow() { 
 
      document.images[0].src = trafficLights[3]; 
 
     } 
 

 
     function redYellow() { 
 
      document.images[0].src = trafficLights[1]; 
 
     } 
 

 
     function red() { 
 
      document.images[0].src = trafficLights[0]; 
 
     } 
 

 
     function yellow2() { 
 
      document.images[0].src = trafficLights[2]; 
 
     } 
 

 
     function automatic() { 
 
      if (trafficLight == "green") { 
 
       setTimeout(green(),500); 
 
       trafficLight = "yellow"; 
 
      } else if (trafficLight == "yellow") { 
 
       setTimeout(yellow(),500); 
 
       trafficLight = "redYellow"; 
 
      } else if (trafficLight == "redYellow") { 
 
       setTimeout(redYellow(),500); 
 
       trafficLight = "red"; 
 
      } else if (trafficLight == "red") { 
 
       setTimeout(red(),500); 
 
       trafficLight = "yellow2";  
 
      } else { 
 
       setTimeout(yellow2(),500); 
 
       trafficLight = "green"; 
 
      } 
 
     } 
 

 
\t \t 
 
\t \t setInterval(automatic,1000); 
 
     
 
\t \t 
 
\t \t 
 
    </script> 
 
    </body> 
 
</html>

+0

Огромное вам спасибо –

+0

может у вас возвысить? –