Javascript-форум - Показать сообщение отдельно - Помогите разобраться в коде! Реализовать светофор

Vladimir93 · #1 (**permalink**) 08.11.2014, 19:33

Доброго времени суток. С javascript не работал, учу Java. Появилась задача написать простой светофор с тремя кнопками(для переключения цветов в ручном режиме) Внизу код, такой вопрос. Когда в функции описываю изменение стиля одного дива- все работает, если я в функции изменяю стили всем дивам - изменяеться только первый...тобиж не работает. Так же в теге скрипт разные реализации методов, пытался решить проблему Что не так? Подскажите что почитать, чтобы разобраться..

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title>Светофор</title>
    <link rel="stylesheet" type="text/css" href="Stylesheet.css">
    <script type="text/javascript">
        function red1(){
            var red = document.getElementById('closedred');
            style = red.style;
            style.setProperty()
            var yellow = document.getElementById('closedyellow');
            yellow.className = "yellow";
        }
        function red() {
            $("#closedred"). document.getElementById('closedred').style.background = 'red';
            $("#closedyellow"). document.getElementById('closedyellow').style.background = 'yellow';
            document.getElementById('closedred').style.background = 'red';
            function newfunction (){
                document.getElementById('closedyellow').style.background = 'yellow';
            }
        }
        function yellow() {
            document.getElementById('closedyellow').style.background = 'yellow';
        }
        function green() {
            document.getElementById('closedred').style.background = 'red';
        }

//        var color;
//        function ChangeBackground(color, id)
//        {
//            document.getElementById("id").style.backgroundColor=color;
//        }
//
//        function wechsel(color) {
//
//            if (color == 1) {
//                document.getElementById('container').style.backgroundColor = '#ffffff';
//            }
//
//            if (color == 2) {
//                document.getElementById('container').style.backgroundColor = '#0000ff';
//            }
//
//            if (color == 3) {
//                document.getElementById('container').style.backgroundColor = '#ff0000';
//            }
//        }
//
    function changeDiv (id){
        if (id  == document.getElementById('closedred')){
            document.getElementById('closered').style.background = 'red';
            document.getElementById('closedyellow').style.backgroundColor = 'closedyellow';
            document.getElementById('closedgreen').style.backgroundColor = 'closedgreen';
        }
        if (id == document.getElementById('closedyellow')){
            document.getElementById('closedred').style.backgroundColor = 'closedred';
            document.getElementById('closedyellow').style.backgroundColor = 'yellow';
            document.getElementById('closedgreen').style.backgroundColor = 'closedgreen';
        }
        if (id == document.getElementById('closedgreen')){
            document.getElementById('closered').style.backgroundColor = 'closedred';
            document.getElementById('closedyellow').style.backgroundColor = 'closedyellow';
            document.getElementById('closedgreen').style.backgroundColor = 'green';
        }
    }
    </script>
</head>
<body>

<div align="center" id="closedred">

</div>
<div align="center" id="closedyellow">

</div>
<div align="center" id="closedgreen">

</div>
<input type=button value="Запуск" onclick="ready()">
<table border=1 align=center><tr><td><div class=text3><form>
    <input type=button value="Красный" onClick="changeDiv('closedred')">
    <input type=button value="Желтый" onClick="document.getElementById('closedyellow').style.backgroundColor = 'yellow'">
    <input type=button value="Зеленый" onClick="document.getElementById('closedgreen').style.backgroundColor = 'green'">
</form></div></td></table>


</body>
</html>

#red {
     align-content: center;
     width: 100px;
     height: 100px;
     background: #FF0000;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     border-radius: 50px;
     border: solid;
 }
#green {
    align-content: center;
    width: 100px;
    height: 100px;
    background:  #00FF00;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}
#yellow {
    align-content: center;
    width: 100px;
    height: 100px;
    background:  #FFFF00;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}
#closedred {
    align-content: center;
    width: 100px;
    height: 100px;
    background: #FFE4E1;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}
#closedgreen {
    align-content: center;
    width: 100px;
    height: 100px;
    background:  #F0FFF0;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}
#closedyellow {
    align-content: center;
    width: 100px;
    height: 100px;
    background:  #FFFFE0;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}