Java Script Change Color of CSS

Markus · 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>

dsonesuk · April 18, 2021

You can't have multiple functions of the same name. You only need one, the parameters are filled on the click of button that calls the function using the colours and whatever else passed as arguments within the braces.

Sign In

Java Script Change Color of CSS

Recommended Posts

Markus

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity