Conditionally Change Color of "DL" Element in Calendars

[kpcollier]

Hello,

I have a calendar style that I have taken from this Caspio template and I am trying to change some things on my calendar datapage. You can see that in this style, they have a <dl> tag that has a yellow background. I can see in styles how they did this with CSS. However, I am trying to select this tag in JavaScript and run it through a conditional statement to change the background color based on the value of a field. 

I have not been successful in being able to select this tag. Everything I try gives me a 'cannot set backgroundColor of undefined' error in devtools. 

 

Above is the element type from devtools. Below is one of my attempts with my limited knowledge of javascript.

if('[@field:Tech_Schedule_Table_2_Event_Type]' == 'Install'){

document.getElementsByTagName("DL").style.backgroundColor = '#b3e6b3';

}else if('[@field:Tech_Schedule_Table_2_Event_Type]' == 'Measure'){

document.getElementsByTagName("DL").style.backgroundColor = 'red';
}

else if('[@field:Tech_Schedule_Table_2_Event_Type]' == 'Time Off'){

document.getElementsByTagName("DL").style.backgroundColor = 'yellow';
}

 

Any help is appreciated.

[kpcollier]

To continue my embarrassing javascript, I have been able to use a forEach loop to change the color of the <dl> background. But I am too novice to be able to take this out of the foreach loop and work conditionally. This below sets ALL <dl> background to lightblue, no matter the condition.

  var dl = document.querySelectorAll('[data-cb-name="DataCtnr"]');
  
  if('[@field:Tech_Schedule_Table_2_Event_Type]' == 'Install') {
  	dl.forEach(function (elem) {
      elem.style.backgroundColor = "lightblue";
    });
  } else if('[@field:Tech_Schedule_Table_2_Event_Type]' == 'Measure') {
  	dl.forEach(function (elem) {
      elem.style.backgroundColor = "lightred";
    }); 
  } else if('[@field:Tech_Schedule_Table_2_Event_Type]' == 'Time Off') {
  	dl.forEach(function (elem) {
      elem.style.backgroundColor = "lightgreen";
    });
  };
  

 

[kpcollier]

I've found a forum post with a solution that works: