javascript - Javascript: how do you use multiple if else statments refering to different elements?

Question

I am Completely new to JavaScript so this may be really obvious but I am trying to build an Andon system using traffic lights where if the number is above or below a certain number the light will change colour (i.e. > 5 = green). There are nine sets of lights in total, I have successfully made one light change based on the variable by using query select all and then change the opacity.

When i try and do this with the second light nothing happens. I have tried to make it work by naming my div elements in html and CSS differently e.g. "Zcircle", "A1circle"

Link to code pen.

Any help will be greatly appreciated! Thanks

Code

HTML:

div class="Zcontainer">
       <div class="Zcircle red" color="red">
       </div>
       <div class="Zcircle yellow" color="yellow"></div>
       <div class="Zcircle green" color="green"></div>
     </div>

     <div class="A1container">
       <div class="A1Circle red" color="red">
       </div>
       <div class="A1Circle yellow" color="yellow"></div>
       <div class="A1Circle green" color="green"></div>
     </div>

CSS

.Zcontainer {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  left: 250px;
  bottom: 75px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

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

.Zcircle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

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

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

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

.A1container {
  background-color: #2c3e50;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  left: 350px;
  bottom: 275px;
  padding: 15px 0;
  height: 200px;
  width: 70px;
}

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

.A1circle::after {
  border-right: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  content: " ";
  position: absolute;
  top: 5px;
  left: 0px;
  width: 30px;
  height: 30px;
}

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

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

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

Javascript

//first traffic light - this one works

var myElements = document.querySelectorAll(".Zcircle");

for (var i = 0; i < myElements.length; i++) {
  myElements[i].style.opacity = 0;
}

var $15a = 2 //value which will make the light change color

if ($15a > 4) {
  var myElements = document.querySelectorAll(".Zcircle");

  for (var x = 2; x < myElements.length; i++) {
    myElements[x].style.opacity = 1;
  }
} else if ($15a < 3) {
  var myElements = document.querySelectorAll(".Zcircle");

  for (var x = 0; x < myElements.length; i++) {
    myElements[x].style.opacity = 1;
  }
} else {
  var myElements = document.querySelectorAll(".Zcircle");

  for (var x = 1; x < myElements.length; i++) {
    myElements[x].style.opacity = 1;
  }
}

//second traffic light - this one doesnt work

var myElements = document.querySelectorAll(".A1circle");

for (var a = 0; a < myElements.length; a++) {
  myElements[a].style.opacity = 0;
}

var $15b = 1; //value which will make the light change color 

if ($15b > 4) {
  var myElements = document.querySelectorAll(".A1circle");

  for (var b = 2; x < myElements.length; b++) {
    myElements[b].style.opacity = 1;
  }
} else if ($15b < 3) {
  var myElements = document.querySelectorAll(".A1circle");

  for (var b = 0; b < myElements.length; b++) {
    myElements[b].style.opacity = 1;
  }
} else {
  var myElements = document.querySelectorAll(".A1circle");

  for (var b = 1; b < myElements.length; b++) {
    myElements[b].style.opacity = 1;
  }
}

标签： javascriptif-statementelementqueryselector

Answer 1

Here is the final code you wanted.

let allZCircles = select(".Zcircle"),
    allA1Circles = select(".A1Circle"),
    items = 2;

//hides all the lights
setOpacity(allZCircles, 0);
setOpacity(allA1Circles, 0);

//as per op's requirnments
if(items >= 5) {
    setOpacity(select(".Zcircle.green"), 1);  // makes green light visible
    setOpacity(select(".A1Circle.green"), 1);  // makes green light visible
} else if (items < 3) {
    setOpacity(select(".Zcircle.red"), 1);  // makes red light visible
    setOpacity(select(".A1Circle.red"), 1);  // makes red light visible
} else {
    setOpacity(select(".Zcircle.yellow"), 1);  // makes yellow light visible
    setOpacity(select(".A1Circle.yellow"), 1);  // makes yellow light visible
}


function select(selector) {return document.querySelectorAll(selector); }
function setOpacity(selectors, opacity) {selectors.forEach((selector) => selector.style.opacity = opacity);}