kpcollier Posted March 8, 2021 Report Share Posted March 8, 2021 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. Quote Link to comment Share on other sites More sharing options...
kpcollier Posted March 8, 2021 Author Report Share Posted March 8, 2021 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"; }); }; Quote Link to comment Share on other sites More sharing options...
kpcollier Posted March 8, 2021 Author Report Share Posted March 8, 2021 I've found a forum post with a solution that works: Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.