Jump to content

Java Script Change Color of CSS


Markus
 Share

Recommended Posts

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...