Jump to content

Conditionally Change Color of "DL" Element in Calendars

Recommended Posts


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.

Link to comment
Share on other sites

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";


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...