I am facing a challenge with dynamically changing color styling of an element using Javascript. The colors are set by the ids #clock and #quantity. When a certain condition is met, I add a class to change the color styling, and remove it when the condition changes back. However, the issue is that after removing the class, the color style persists instead of reverting to the colors styled by the previous 2 id's.
One way to solve this would be to remove the ids and reapply them dynamically with Javascript. But I'm exploring if there might be a more efficient solution?
<div id="clock">
<div id="top-gradient"></div>
<div id="time">
<span id="zen9" class="quantity"></span>
</div>
<div class="zentext">Server Monitor</div>
</div>
Javascript:
bar = document.getElementById(id);
etop = bar.parentNode.parentElement;
ebottom = bar.parentNode.previousElementSibling;
etext = bar.parentNode.parentNode.childNodes[5];
if ( value >= threshold[id] && !(bar.classList.contains("zenRed"))) {
bar.classList.add("redZen");
etop.classList.add("redZenTop");
ebottom.classList.add("redZenBottom");
etext.classList.add("redZenText");
} else if ( value < threshold[id] && (bar.classList.contains("zenRed"))) {
bar.classList.remove("redZen");
etop.classList.remove("redZenTop");
ebottom.classList.remove("redZenBottom");
etext.classList.remove("redZenText");
}