How to use Switch() with IF statments in Javascript?

Question

Is anyone able to explain what i've got wrong here? I have a set of grids which change colour to red, amber and green based on the value of their respective input divs - This all worked fine.

However, next I was trying to add the ability to "turn off" the colours by making the box gray. Using the same logic of having another set of input divs which would either equal 1 or 0, and adding a switch statement to the javascript which would run 1 of 2 if statements. The first would check if my first input div is a 1 (Called KB-CellActive), if true this would change the box colour gray. If its a 0, it would go to the original block of code which checks the other input divs (KB-Values) and changes the colour to red, amber or green.

I've checked both blocks of code separately and these both work so I must be getting something wrong with the Switch() part.

CodePen

let values = document.querySelectorAll(".KB-CellActive div");
values.forEach(function(el) {
  val = Number(el.innerHTML);
  target = document.querySelector(el.dataset.target);

  switch (val) {
    case 1:
      values = document.querySelectorAll(".KB-CellActive div");

      values.forEach(function(el) {
        val = Number(el.innerHTML);
        target = document.querySelector(el.dataset.target);

        if (val > 0) {
          target.style.backgroundColor = "#808080";
        }
      });
      break;

    case 0:
      values = document.querySelectorAll(".KB-values div");

      values.forEach(function(el) {
        val = Number(el.innerHTML);
        target = document.querySelector(el.dataset.target);

        if (val >= 5) {
          target.style.backgroundColor = "#287d00";
        } else if (val >= 3 && val < 5) {
          target.style.backgroundColor = "#e0880b";
        } else if (val <= 2) {
          target.style.backgroundColor = "#ff0000";
        }
      });

      values = document.querySelectorAll(".KB-valuesx div");

      values.forEach(function(el) {
        val = Number(el.innerHTML);
        target = document.querySelector(el.dataset.target);

        if (val >= 3) {
          target.style.backgroundColor = "#287d00";
        } else if (val >= 2 && val < 3) {
          target.style.backgroundColor = "#e0880b";
        } else if (val <= 1) {
          target.style.backgroundColor = "#ff0000";
        }
      });
  }
});

.KB-LineName {
  font-family: Roboto, arial, san-serif;
  padding: 5px;
}

.KB-Grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.KB-item {
  height: 80px;
  max-width: 150px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 33.3333%;
  flex-basis: 200px;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid;
  font-size: 20px;
  text-align: center;
  font-family: Roboto, arial, san-serif;
}

.blank {
  height: 0;
}

.KB-values {
  visibility: hidden;
}

.KB-valuesx {
  visibility: hidden;
}


   Line 1 
  
    PC02
 Hrs:
  
  PC11
 Hrs: 
  PC14
 Hrs: 
  PC20
 Hrs: 



   Line 2 
  PC15A
 Hrs: 
  PC15B
 Hrs: 
  PC16A
 Hrs: 
  PC16B
 Hrs: 
  PC17
 Hrs: 
  PC18
 Hrs: 
  PC1322A
 Hrs: 
  PC1322B
 Hrs: 
  PC26
 Hrs: 
  PC30
 Hrs: 
  PC33
 Hrs: 



   Line 3 
  PC04
 Hrs: 
  PC05
 Hrs: 
  PC10
 Hrs: 
  PC12
 Hrs: 
  PC32
 Hrs: 
  PC34
 Hrs: 
  PC35
 Hrs: 
  PC25
 Hrs: 



   Electronics 
  PC23
 Hrs: 
  PC39
 Hrs: 
  PC41
 Hrs: 




  
   6
  
   6 
  
  6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 
  
   6 



  
   3 
  
   2 
  
    
    
      1
       0 
       0 
       1

How to use Switch() with IF statments in Javascript?

Answers (1)

Related Questions