I have included 1 custom js file within my custom theme. Some stuff works and some stuff doesn’t work. I kinda understand how js works, if the js is loaded before the DOM than some stuff wont work well. I have a couple of methods within a window. The first couple of event listeners are being used on one page and the last one on a different page. But it gives conflics like event listener on null, when it tries to load it when it’s not on the page etc etc. Does Drupal have some sort of fix for that, or a pure JS way?

window.onload = function(e){ const previousWebinars = document.getElementById('PreviousWebinars'); const upcomingWebinars = document.getElementById('UpcomingWebinars');  const upcomingWebinarsContent = document.getElementById('block-views-block-webinars-list-upcoming-webinars'); const previousWebinarsContent = document.getElementById('block-views-block-webinars-list-previous-webinars');  previousWebinars.classList.add('hideWebinars'); upcomingWebinarsContent.classList.add('show');  upcomingWebinars.addEventListener('click', function(){     previousWebinars.classList.add('hideWebinars');     previousWebinarsContent.classList.remove('show');     upcomingWebinarsContent.classList.add('show');     if(upcomingWebinars.classList.contains('hideWebinars')){         upcomingWebinars.classList.remove('hideWebinars');     } });  previousWebinars.addEventListener('click', function(){     upcomingWebinars.classList.add('hideWebinars');     upcomingWebinarsContent.classList.remove('show');     previousWebinarsContent.classList.add('show');     if(previousWebinars.classList.contains('hideWebinars')){         previousWebinars.classList.remove('hideWebinars');     } });      const hideBtn = document.getElementById('hide-filter-btn');   const filterBlock = document.querySelector('.ecwi-filter');   hideBtn.addEventListener('click', function(e){     e.preventDefault();     filterBlock.classList.toggle('hide');   });  }) }