Markus
-
Posts
1 -
Joined
-
Last visited
Markus's Achievements
Newbie (1/7)
0
Reputation
-
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>