title: Vanilla JS - Reinitializing functions after swup.js page transition
body: <p>I'm fairly new to JS and am using swup.js (an awesome library btw) to transition between pages on a site. Transitions are working well however post-transition I need to re-initalise some JS functions I have.</p>
  
  <p>According to swup.js docs I just to wrap them in a swup event. How would I do this in the below scenario? I think I specifically need to re-add the two functions to the two buttonLeft/buttonRight constants.</p>
  
  <p>Examples here: <a href="https://swup.js.org/getting-started/reloading-javascript" rel="nofollow noreferrer">https://swup.js.org/getting-started/reloading-javascript</a></p>
  
  <pre><code>
  //JS in script tag at bottom of body
      const swup = new Swup();
          init();
          swup.on('contentReplaced', init);
  
  
  // Function called in my main.js file
  function init() {
      if (document.querySelector('')) { // What do I include here?
          // What do I include here?
      }
  
  
  // Functions I'd like reinitialized (also in main.js)
  const buttonRight = document.getElementById('slide-right');
  const buttonLeft = document.getElementById('slide-left');
  buttonLeft.onclick = scrollLeft; 
  buttonRight.onclick = scrollRight;
  
  function scrollLeft() {
    document.getElementById('hoz-scroller').scrollTo({ left: 0, behavior: 'smooth' }); 
    buttonLeft.classList.add('disabled'); 
    if (buttonRight.classList.contains('disabled')) { 
      buttonRight.classList.remove('disabled'); 
    }
  };
  
  function scrollRight() {
    document.getElementById('hoz-scroller').scrollTo({ left: elementWidth, behavior: 'smooth' }); 
    buttonRight.classList.add('disabled'); 
    if (buttonLeft.classList.contains('disabled')) { 
    buttonLeft.classList.remove('disabled'); 
    }
  };
  
  </code></pre>