Java Script Change Color of CSS in JavaScript Posted April 18, 2021 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>
Java Script Change Color of CSS
in JavaScript
Posted
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>