I am trying to select some elements using a footer script on a Squareapace site. In the code below, I am able to get the '.event-time-12hr' class but not the '.item.item--ongoing' class. I have tried getting some parents of the second class but I can't get those either. Ajax is disabled for the site.

If I run the querySelector in the console of the browser after the page loads it works, so I assume it is a loading issue, I am not sure how to delay the script any longer.

<script >
(function() {
  if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  document.addEventListener('readystatechange', event => {
    if (event.target.readyState === "complete") {
      init()
    }
  });

  function init() {
    var monthlyEl = document.querySelectorAll('.item.item--ongoing');
    var elements = document.querySelectorAll('.event-time-12hr');
    console.log('item--ongoing', monthlyEl.length)
    console.log('event time', elements.length)
  }

  new MutationObserver(function() {
    init();
    // myFunction2(); , etc...
  }).observe(document.body, {
    attributes: true,
    attributeFilter: ["class"]
  });
})();
</script>