Что не так с моей программой "Светофор по времени"?

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

<!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>

javascript html light traffic timed
person John Greenwood    schedule 09.03.2016    source источник
comment
У вас есть = вместо == в ваших операторах if. Затем вы объявляете каждое trafficLight локальной переменной.   -  person Adam Konieska    schedule 10.03.2016
comment
Кроме того, вам не следует повторно объявлять trafficLight внутри каждого из ваших операторов if. Так что первый, например, должен читаться как if (trafficLight == "green"){setTimeout(green(),500); trafficLight = "yellow";   -  person jmcgriz    schedule 10.03.2016

Ответы (3)


arrow_upward
1
arrow_downward

Ни одно из ваших условий не выполняется так, как вы предполагали, поскольку они настроены с использованием оператора присваивания "=", а не оператора сравнения "==".

person zcoon    schedule 09.03.2016
comment
Я внес соответствующие изменения в переменные и добавил операторы сравнения. однако я все еще нахожу его как green.png и остаюсь таким, возможно, это как-то связано с тем, как я его структурировал, или я неправильно использую команды? - person John Greenwood; 10.03.2016

arrow_upward
1
arrow_downward

Я немного почистил ваш код:

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. Не используйте скобки (), если вы используете именованную функцию в качестве обработчика.
person Tyr    schedule 09.03.2016

arrow_upward
0
arrow_downward

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

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

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

person meet thakkar    schedule 09.03.2016