Hi alle,
habe eine Ampel mit 3 buttons gebaut.
Jeder button soll onklick in der Farbe (rot/gelb/grĂ¼n) leuchten.
Wenn ein andere button geklickt wird, soll der Button davor ausgehen und der neue angehen usw.
BItte um eure Hilfe!
Danke!
<!DOCTYPE html>
<html>
<head>
<style>
.css-ampel {
display: inline-block;
width: 30px;
height: 90px;
border-radius: 6px;
position: relative;
background-color: black;
}
.buttonred {
position:absolute;
border-radius:15px;
top:10px;
width: 22px;
height: 22px;
left: 12px;
}
.buttonyellow {
position:absolute;
border-radius:15px;
top:40px;
width: 22px;
height: 22px;
left: 12px;
}
.buttongreen {
position:absolute;
border-radius:15px;
top:70px;
width: 22px;
height: 22px;
left: 12px;
}
</style>
<script>
var count = 1;
function setColor(buttonred, color) {
var property = document.getElementById(buttonred);
if (count == 0) {
property.style.backgroundColor = "white"
count = 1;
}
else {
property.style.backgroundColor = "red"
count = 0;
}
}
var count = 1;
function setColor(buttonyellow, color) {
var property = document.getElementById(buttonyellow);
if (count == 0) {
property.style.backgroundColor = "white"
count = 1;
}
else {
property.style.backgroundColor = "yellow"
count = 0;
}
}
var count = 1;
function setColor(buttongreen, color) {
var property = document.getElementById(buttongreen);
if (count == 0) {
property.style.backgroundColor = "white"
count = 1;
}
else {
property.style.backgroundColor = "green"
count = 0;
}
}
</script>
</head>
<body>
<span class="css-ampel"></span>
<input class=buttonred type="button" id="buttonred" style= "color:white" onclick="setColor('buttonred', 'red')";/>
<input class=buttonyellow type="button" id="buttonyellow" style= "color:white" onclick="setColor('buttonyellow', 'yellow')";/>
<input class=buttongreen type="button" id="buttongreen" style= "color:white" onclick="setColor('buttongreen', 'green')";/>
</body>
</html>