Can’t change the font color using javascript

I’m trying to change the font color of an element using JavaScript. It’s not functioning, while it’s functioning for other elements.

I would appreciate your help. Thanks.

// var hr = (new Date()).getHours();

// if (hr >= 6 && hr < 17) {
  elementsTitle = document.getElementsByClassName("titlex");
  
  for (var i = 0; i < elementsTitle.length; i++) {
    elementsTitle[i].style.color = "pink";
  }
// }
<div class="titlex tp-caption NotGeneric-SubTitle tp-resizeme" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-15','-15','-15','-15']" data-whitespace="nowrap"
  data-type="text" data-responsive_offset="on" data-frames='[{"from":"y:50px;opacity:0;","speed":1000,"to":"o:1;","delay":600,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[175%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;"}]'
  data-textAlign="['center','center','center','center']" style="z-index: 8; white-space: nowrap;font-family:Poppins; font-weight: 400;">P R E S E N T I N G
  <br>
  <h1>The Next Big Names!</h1>
</div>