How to simplify this JavaScript code through a "for" loop?

How can I simplify this JavaScript code through a “for” loop so that it is one loop?

        if (j.di_1[0] == 1) {
          q("di1_3").innerHTML = h;
          q("di1_3").className = "fg";
          q("di1_1").className = "wg"
        } else {
          q("di1_3").innerHTML = l;
          q("di1_3").className = "fr";
          q("di1_1").className = "wr"
        }
        q("di1_4").innerHTML = sectoday(j.di_1[1]);
        if (j.di_2[0] == 1) {
          q("di2_3").innerHTML = h;
          q("di2_3").className = "fg";
          q("di2_1").className = "wg"
        } else if (j.di_2[0] == 0) {
          q("di2_3").innerHTML = l;
          q("di2_3").className = "fr";
          q("di2_1").className = "wr"
        }
        q("di2_4").innerHTML = sectoday(j.di_2[1]);
        if (j.di_3[0] == 1) {
          q("di3_3").innerHTML = h;
          q("di3_3").className = "fg";
          q("di3_1").className = "wg"
        } else if (j.di_3[0] == 0) {
          q("di3_3").innerHTML = l;
          q("di3_3").className = "fr";
          q("di3_1").className = "wr"
        }
        q("di3_4").innerHTML = sectoday(j.di_3[1]);
        if (j.di_4[0] == 1) {
          q("di4_3").innerHTML = h;
          q("di4_3").className = "fg";
          q("di4_1").className = "wg"
        } else if (j.di_4[0] == 0) {
          q("di4_3").innerHTML = l;
          q("di4_3").className = "fr";
          q("di4_1").className = "wr"
        }
        q("di4_4").innerHTML = sectoday(j.di_4[1]);
        if (j.di_5[0] == 1) {
          q("di5_3").innerHTML = h;
          q("di5_3").className = "fg";
          q("di5_1").className = "wg"
        } else if (j.di_5[0] == 0) {
          q("di5_3").innerHTML = l;
          q("di5_3").className = "fr";
          q("di5_1").className = "wr"
        }
        q("di5_4").innerHTML = sectoday(j.di_5[1]);
        if (j.di_6[0] == 1) {
          q("di6_3").innerHTML = h;
          q("di6_3").className = "fg";
          q("di6_1").className = "wg"
        } else if (j.di_6[0] == 0) {
          q("di6_3").innerHTML = l;
          q("di6_3").className = "fr";
          q("di6_1").className = "wr"
        }
        q("di6_4").innerHTML = sectoday(j.di_6[1]);
        if (j.di_7[0] == 1) {
          q("di7_3").innerHTML = h;
          q("di7_3").className = "fg";
          q("di7_1").className = "wg"
        } else if (j.di_7[0] == 0) {
          q("di7_3").innerHTML = l;
          q("di7_3").className = "fr";
          q("di7_1").className = "wr"
        }
        q("di7_4").innerHTML = sectoday(j.di_7[1]);
        if (j.di_8[0] == 1) {
          q("di8_3").innerHTML = h;
          q("di8_3").className = "fg";
          q("di8_1").className = "wg"
        } else if (j.di_8[0] == 0) {
          q("di8_3").innerHTML = l;
          q("di8_3").className = "fr";
          q("di8_1").className = "wr"
        }
        q("di8_4").innerHTML = sectoday(j.di_8[1]);

Wrote straight forward code to display the output on the page. It performs its function as it should and very quickly, but I understand with all my heart that it shouldn’t be this way.

Unfortunately, I don’t have enough knowledge to cope with this task myself.

>Solution :

You could create a function that applies that behaviour to each element like this and then just run a loop to call this function as many times as needed. Feel free to change the loop according to your needs.

I dont have your full code or relevant data so I can’t really make a working example, HTML unknown and also the values of j, h or l.

function updateElementData(elementIndex, j) {
  const index = elementIndex.toString();
  const commonClassName = "wr";
  const positiveClassName = "wg";
  const negativeClassName = "fr";
  const valueToDisplay = j[`di_${index}`][0] === 1 ? h : l;

  q(`di${index}_3`).innerHTML = valueToDisplay;
  q(`di${index}_3`).className = j[`di_${index}`][0] === 1 ? positiveClassName : negativeClassName;
  q(`di${index}_1`).className = j[`di_${index}`][0] === 1 ? positiveClassName : commonClassName;
  q(`di${index}_4`).innerHTML = sectoday(j[`di_${index}`][1]);
}

for (let i = 1; i < 9; i++) {
    updateElementData(i, j);
}