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;
}

<div class="KB-Grid">
  <h2 class="KB-LineName"> Line 1 </h2>
  <div class="KB-item" id="KB-1">
    PC02</br> Hrs:
  </div>
  <div class="KB-item" id="KB-2">PC11</br> Hrs: </div>
  <div class="KB-item" id="KB-3">PC14</br> Hrs: </div>
  <div class="KB-item" id="KB-4">PC20</br> Hrs: </div>
</div>

<div class="KB-Grid">
  <h2 class="KB-LineName"> Line 2 </h2>
  <div class="KB-item" id="KB-5">PC15A</br> Hrs: </div>
  <div class="KB-item" id="KB-6">PC15B</br> Hrs: </div>
  <div class="KB-item" id="KB-7">PC16A</br> Hrs: </div>
  <div class="KB-item" id="KB-8">PC16B</br> Hrs: </div>
  <div class="KB-item" id="KB-9">PC17</br> Hrs: </div>
  <div class="KB-item" id="KB-10">PC18</br> Hrs: </div>
  <div class="KB-item" id="KB-11">PC1322A</br> Hrs: </div>
  <div class="KB-item" id="KB-12">PC1322B</br> Hrs: </div>
  <div class="KB-item" id="KB-14">PC26</br> Hrs: </div>
  <div class="KB-item" id="KB-15">PC30</br> Hrs: </div>
  <div class="KB-item" id="KB-16">PC33</br> Hrs: </div>
</div>

<div class="KB-Grid">
  <h2 class="KB-LineName"> Line 3 </h2>
  <div class="KB-item" id="KB-17">PC04</br> Hrs: </div>
  <div class="KB-item" id="KB-18">PC05</br> Hrs: </div>
  <div class="KB-item" id="KB-19">PC10</br> Hrs: </div>
  <div class="KB-item" id="KB-20">PC12</br> Hrs: </div>
  <div class="KB-item" id="KB-21">PC32</br> Hrs: </div>
  <div class="KB-item" id="KB-22">PC34</br> Hrs: </div>
  <div class="KB-item" id="KB-23">PC35</br> Hrs: </div>
  <div class="KB-item" id="KB-24">PC25</br> Hrs: </div>
</div>

<div class="KB-Grid">
  <h2 class="KB-LineName"> Electronics </h2>
  <div class="KB-item" id="KB-25">PC23</br> Hrs: </div>
  <div class="KB-item" id="KB-26">PC39</br> Hrs: </div>
  <div class="KB-item" id="KB-27">PC41</br> Hrs: </div>
</div>

<!--Inputs-->
<div class="KB-values">
  <!--PC02-->
  <div data-target="#KB-1" id="KBV1"> 6</div>
  <!--PC11-->
  <div data-target="#KB-2" id="KBV2"> 6 </div>
  <!--PC14-->
  <div data-target="#KB-3" id="KBV3">6 </div>
  <!--PC20-->
  <div data-target="#KB-4" id="KBV4"> 6 </div>
  <!--PC15A-->
  <div data-target="#KB-5" id="KBV5"> 6 </div>
  <!--PC15B-->
  <div data-target="#KB-6" id="KBV6"> 6 </div>
  <!--PC16A-->
  <div data-target="#KB-7" id="KBV7"> 6 </div>
  <!--PC16B-->
  <div data-target="#KB-8" id="KBV8"> 6 </div>
  <!--PC17-->
  <div data-target="#KB-9" id="KBV9"> 6 </div>
  <!--PC18-->
  <div data-target="#KB-10" id="KBV10"> 6 </div>
  <!--PC1322A-->
  <div data-target="#KB-11" id="KBV11"> 6 </div>
  <!--PC1322B-->
  <div data-target="#KB-12" id="KBV12"> 6 </div>
  <!--PC26-->
  <div data-target="#KB-14" id="KBV14"> 6 </div>
  <!--PC30-->
  <div data-target="#KB-15" id="KBV15"> 6 </div>
  <!--PC33-->
  <div data-target="#KB-16" id="KBV16"> 6 </div>
  <!--PC04-->
  <div data-target="#KB-17" id="KBV17"> 6 </div>
  <!--PC05-->
  <div data-target="#KB-18" id="KBV18"> 6 </div>
  <!--PC10-->
  <div data-target="#KB-19" id="KBV19"> 6 </div>
  <!--PC12-->
  <div data-target="#KB-20" id="KBV20"> 6 </div>
  <!--PC32-->
  <div data-target="#KB-21" id="KBV21"> 6 </div>
  <!--PC34-->
  <div data-target="#KB-22" id="KBV22"> 6 </div>
  <!--PC35-->
  <div data-target="#KB-23" id="KBV23"> 6 </div>
  <!--PC25-->
  <div data-target="#KB-24" id="KBV24"> 6 </div>
  <!--PC23-->
  <div data-target="#KB-25" id="KBV25"> 6 </div>
  <!--PC39-->
  <div data-target="#KB-26" id="KBV26"> 6 </div>
  <!--PC41-->
  <div data-target="#KB-27" id="KBV27"> 6 </div>
</div>

<div class="KB-valuesx">
  <!--PC1322A-->
  <div data-target="#KB-11" id="KBV11"> 3 </div>
  <!--PC1322B-->
  <div data-target="#KB-12" id="KBV12"> 2 </div>
  <div>
    <!--Active inputs-->
    <div class="KB-CellActive">
      <div data-target="#KB-1" id="KBA1">1</div>
      <div data-target="#KB-2" id="KBA1"> 0 </div>
      <div data-target="#KB-3" id="KBA1"> 0 </div>
      <div data-target="#KB-4" id="KBA1"> 1 </div>
    </div>
  </div>
</div>

Mingze Li · Accepted Answer · 2021-09-08 08:14:27Z

2

Firstly your code has something wrong:

The "Case" should be "case"
In the end of your code, you need add "});", you can use any code formatter to check your code

Secondly for your question, please read the document of switch usage. When finish code of one case, you need to put a "break;" to indicate that this case has been ended. After adding break, then first line of div has been changed to greyed out.

answered Sep 8, 2021 at 8:14

Mingze Li

3902 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Konstantin Bodnia Over a year ago

Yeah, any modern IDE is going to tell you that you're missing a break statement in the case clause. But it probably doesn't because the rest of the code is syntactically incorrect.

jhew123 Over a year ago

Thank you. I've made these changes and it changes the boxes to gray now. I though I read on W3 schools that if you use default: you dont need a break which is why i didn't add it. The first part is working but its doesnt seem to be reading the second if statement, the boxes input have all been set to 6 so should be green but will only go red. Do you know whats missing from the second bit?

Mingze Li Over a year ago

@jhew123 Yes, the default case does not require break but other cases need. For your second question, I saw your codepen has been updated. Maybe you can share the wrong case details here. Most likely step by step debugging will help you to rectify the code.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related