CODEWITHSUNDEEP
javascripthtmlif-statement
jhew123
jhew123

Reputation: 77

Apply 1 JS If statement to multiple HTML IDs

This is probably a really simple question and might have been answered before so I may just be phrasing it wrong when I’ve been searching for a solution.

I have a html grid where each <div> will change colour based on the value of a separate input <div>. I have this working so if < 2 - red, >= 3 & < 5 - orange, > 5 - green , but at the moment I am having to duplicate the JS if statement for each "box" I want to add. So the code below has four if statements with the only difference being the number at the end of the ids.

Link to Code Pen: Here

What would I need to change so that I can use one if statement and then in theory add an infinite number of boxes by adding another grid <div> and another input <div> with a different number on the end of the ID name?


<!--Grid--> 
<div class="KB-Grid">
  <div class="KB-item" id = "KB-1">PC15A </br> Hrs: </div>
  <div class="KB-item" id = "KB-2">PC15B </br> Hrs:</div>
  <div class="KB-item" id = "KB-3">PC16A </br> Hrs:</div>
  <div class="KB-item" id = "KB-4">PC16B </br> Hrs: </div>
</div>

<!--Inputs--> 
<div class = "KB-values">  
<div id = "KBV1"> 5</div>
<div id = "KBV2"> 5 </div>
<div id = "KBV3"> 5 </div>
<div id = "KBV4"> 5 </div>
</div>


var KBV1 = document.getElementById("KBV1").innerHTML;
        if (KBV1 >= 5) {
          document.getElementById("KB-1").style.backgroundColor = '#287d00';
        } else
        if (KBV1 >= 3 && KBV1 < 5) {
          document.getElementById("KB-1").style.backgroundColor = '#e0880b';
        } else
        if (KBV1 <= 2) {
          document.getElementById("KB-1").style.backgroundColor = '#ff0000';
        }


var KBV2 = document.getElementById("KBV2").innerHTML;
        if (KBV2 >= 5) {
          document.getElementById("KB-2").style.backgroundColor = '#287d00';
        } else
        if (KBV2 >= 3 && KBV2 < 5) {
          document.getElementById("KB-2").style.backgroundColor = '#e0880b';
        } else
        if (KBV2 <= 2) {
          document.getElementById("KB-2").style.backgroundColor = '#ff0000';
        }


var KBV3 = document.getElementById("KBV3").innerHTML;
        if (KBV3 >= 5) {
          document.getElementById("KB-3").style.backgroundColor = '#287d00';
        } else
        if (KBV3 >= 3 && KBV3 < 5) {
          document.getElementById("KB-3").style.backgroundColor = '#e0880b';
        } else
        if (KBV3 <= 2) {
          document.getElementById("KB-3").style.backgroundColor = '#ff0000';
        }



var KBV4 = document.getElementById("KBV4").innerHTML;
        if (KBV4 >= 5) {
          document.getElementById("KB-4").style.backgroundColor = '#287d00';
        } else
        if (KBV4 >= 3 && KBV4 < 5) {
          document.getElementById("KB-4").style.backgroundColor = '#e0880b';
        } else
        if (KBV4 <= 2) {
          document.getElementById("KB-4").style.backgroundColor = '#ff0000';
        }

CSS (not sure if this is need to awnser the question so left it at the bottom)

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

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

.blank {
    height: 0;
}

.KB-values{
  visibility: hidden;
}

Upvotes: 0

Views: 213

Answers (1)

imvain2
imvain2

Reputation: 15867

Your best bet is to use data-attributes. So add data-target to each div that stores the value, and have that target store the id of the element you want to change the background of.

The one single loop will cover all future data.

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

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

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

.blank {
    height: 0;
}

.KB-values{
  visibility: hidden;
}
<div class="KB-Grid">
  <div class="KB-item" id="KB-1">PC15A </br> Hrs: </div>
  <div class="KB-item" id="KB-2">PC15B </br> Hrs:</div>
  <div class="KB-item" id="KB-3">PC16A </br> Hrs:</div>
  <div class="KB-item" id="KB-4">PC16B </br> Hrs: </div>
</div>

<!--Inputs-->
<div class="KB-values">
  <div data-target="#KB-1"> 6</div>
  <div data-target="#KB-2"> 4 </div>
  <div data-target="#KB-3"> 2 </div>
  <div data-target="#KB-4"> 1 </div>
</div>

Upvotes: 1

Related Questions