Activate CSS style from JS variable when is true-CodePudding

I am new in coding. I have an HTML, CSS and JS code -traffic light. What I want, is: when a boolean variable is true, to change the first position of the traffic light to red (from CSS .circle.red), when another boolean variable is true, to activate yellow (from CSS: .circle.yellow) and so on for red light.

Any suggestions? Thank you very much for your support!

var count = 1;

var x = document.getElementById("redposition");

if (count == 1) {
  x.circle.red = "red";
}

body {
  margin: 0px;
}

label {
  font-family: Arial;
  font-weight: bold;
  display: inline-block;
  width: 65px;
  margin: 5px 5px 5px 0;
  text-align: right;
  padding: 5px;
  color: #919191;
}

#container {
  width: 100%;
  border: 1px solid gray;
  margin-left: auto;
  margin-right: auto;
}

#header {
  background-color: #73ad21;
  color: white;
}

#content {
  margin: 15px;
}

#footer {
  background-color: #ddd;
  font-size: 18px;
  text-align: center;
  padding: 15px;
}

.pos5 {
  position: relative;
  /*display: table-cell;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;*/
  top: 10px;
  left: 100px;
  width: 250px;
  height: 250px;
  /*border: 1px solid red;*/
  margin: 5px;
  float: left;
  background-color: #1abc9c;
}

.trafficlight {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  transform: translate(-50%, -50%);
  background-color: #2c3e50;
  border-radius: 50px;
  padding: 15px;
  height: 200px;
  width: 70px;
}

.circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  position: relative;
  height: 40px;
  width: 40px;
}


/*.circle::after {
    background-color: #fff;
    border-right: 4px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
}*/

.circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Traffic light</title>


  <link rel="stylesheet" href="mystyle.css">
  <link rel="stylesheet" href="switch.css" type="text/css" media="screen" />

</head>

<body>

  <div class="pos5">
    <div class="trafficlight">
      <div class="circle" id="redposition" color="red"></div>
      <div class="circle" id="yellowposition" color="yellow"></div>
      <div class="circle" id="greenposition" color="green"></div>
    </div>

  </div>
</body>

</html>

CodePudding user response：

Remove the color attribute and use the css classes you already defined.

For that change

<div class="circle" id="redposition" color="red"></div>
<div class="circle" id="yellowposition" color="yellow"></div>
<div class="circle" id="greenposition" color="green"></div>

<div class="circle" id="redposition"></div>
<div class="circle" id="yellowposition"></div>
<div class="circle green" id="greenposition"></div>

You will now see only the green light on.

Now you can just classList.add and classList.remove on your "lightbulbs" to make them change color (see https://developer.mozilla.org/de/docs/Web/API/Element/classList for more info about the classList property).

For example to make the trafficlight show red use

document.getElementById("redposition").classList.add('red');
document.getElementById("yellowposition").classList.remove('yellow');
document.getElementById("greenposition").classList.remove('green');

I adjusted your snippet with all that changes to start on green and then change to red.

I also added the other scenarios:

x=2 will show red and yellow
x=3 will show yellow only
x=4 will show green only

var count = 1;

if (count == 1) {
  // show "red"
  document.getElementById("redposition").classList.add('red');
  document.getElementById("yellowposition").classList.remove('yellow');
  document.getElementById("greenposition").classList.remove('green');
} else if (count == 2) {
  // show yellow and red
  document.getElementById("redposition").classList.add('red');
  document.getElementById("yellowposition").classList.add('yellow');
  document.getElementById("greenposition").classList.remove('green');
} else if (count == 3) {
  // show yellow only
  document.getElementById("redposition").classList.remove('red');
  document.getElementById("yellowposition").classList.add('yellow');
  document.getElementById("greenposition").classList.remove('green');
} else if (count == 4) {
  // show green only
  document.getElementById("redposition").classList.remove('red');
  document.getElementById("yellowposition").classList.remove('yellow');
  document.getElementById("greenposition").classList.add('green');
}

body {
  margin: 0px;
}

label {
  font-family: Arial;
  font-weight: bold;
  display: inline-block;
  width: 65px;
  margin: 5px 5px 5px 0;
  text-align: right;
  padding: 5px;
  color: #919191;
}

#container {
  width: 100%;
  border: 1px solid gray;
  margin-left: auto;
  margin-right: auto;
}

#header {
  background-color: #73ad21;
  color: white;
}

#content {
  margin: 15px;
}

#footer {
  background-color: #ddd;
  font-size: 18px;
  text-align: center;
  padding: 15px;
}

.pos5 {
  position: relative;
  /*display: table-cell;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;*/
  top: 10px;
  left: 100px;
  width: 250px;
  height: 250px;
  /*border: 1px solid red;*/
  margin: 5px;
  float: left;
  background-color: #1abc9c;
}

.trafficlight {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  transform: translate(-50%, -50%);
  background-color: #2c3e50;
  border-radius: 50px;
  padding: 15px;
  height: 200px;
  width: 70px;
}

.circle {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  position: relative;
  height: 40px;
  width: 40px;
}


/*.circle::after {
    background-color: #fff;
    border-right: 4px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
}*/

.circle.red {
  background-color: #c0392b;
  box-shadow: 0 0 20px 5px #c0392b;
}

.circle.yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 20px 5px #f1c40f;
}

.circle.green {
  background-color: #2ecc71;
  box-shadow: 0 0 20px 5px #2ecc71;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Traffic light</title>


  <link rel="stylesheet" href="mystyle.css">
  <link rel="stylesheet" href="switch.css" type="text/css" media="screen" />

</head>

<body>

  <div class="pos5">
    <div class="trafficlight">
      <div class="circle" id="redposition"></div>
      <div class="circle" id="yellowposition"></div>
      <div class="circle green" id="greenposition"></div>
    </div>

  </div>
</body>

</html>