| Vladimir93 |
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;
}
|