Issue
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);
}
Answered By - Chris G
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.