title: Javascript stops working when a link is clicked
body: <p>I have been trying to create a facebook clone app using rails 7. I have used javascript to render some fronted features. At first nothing seems amiss but when I click on a link on the page to redirect to some other view the javascript stops working. I believe that this might be due to the script being loaded before the DOM. What seemed to work was to reload the page and then everything worked as expected. I thus tried using window.location.reload() command in javascript which worked but then as I added more links the task became too tedious and also if I wished to redirect to another page the function redirected me to the same page. So is there a way to implement all the javascript features effectively without having to reload the page.</p>
  <pre><code>app/javascript/application.js
  
  // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
  import &quot;@hotwired/turbo-rails&quot;
  import &quot;controllers&quot;
  
  function home(){
      let link = document.querySelector(&quot;.title-container&quot;)
      if (link!=null){
      link.addEventListener(&quot;click&quot;, function(){
          var location = window.location.origin 
          window.location.assign(location)
          // console.log(window.location)
          window.localStorage.setItem(&quot;activeBtn&quot;, &quot;#index&quot;)
          // window.location.reload()
      })
  }
  
      // let begin_session = document.querySelector(&quot;.actions&quot;)
      // console.log(begin_session)
      // if (begin_session != null)
      // {
      //     begin_session.addEventListener(&quot;click&quot;, function(){
      //         // var location = window.location.origin + &quot;/&quot;
      //         window.location.assign(location)
      //         console.log(location)
      //         window.localStorage.setItem(&quot;activeBtn&quot;, &quot;#index&quot;)
      //         // window.location.reload()
      //     })  
      // }
      // console.log(window.location)    
  }
  
  function refresh(){
      let links = document.querySelector(&quot;a&quot;)
      console.log(links)
      for(let i=0; i&lt;links.length ; i++ )
      {
          links[i].addEventListener(&quot;click&quot;, function(){
              console.log(this)
  
              window.location.reload()
          })
      }
  }
  
  function PageTransition(){
      const sectBtns = document.querySelectorAll(&quot;.page-control&quot;)
      // console.log(sectBtns)
  
      let flag = true
      var activeBtn = localStorage.getItem(&quot;activeBtn&quot;)
  
      // console.log(document.querySelector(activeBtn))
      if (document.querySelector(activeBtn) != null){
      document.querySelector(activeBtn).className += &quot; active&quot;
      }
  
      for (let i=0; i&lt;sectBtns.length; i++){
          if (sectBtns[i].className.includes(&quot;active&quot;)){
              flag = false
              break
          }
      }
  
      if (flag)
      {
          if (document.querySelector(&quot;#home&quot;) != null) 
          document.querySelector(&quot;#home&quot;).className += &quot; active&quot;
  
      }
      for (let i = 0; i &lt; sectBtns.length; i++){
          sectBtns[i].addEventListener(&quot;click&quot;, function(){
              // console.log(this)
              let currentBtn = document.querySelectorAll(&quot;.active&quot;);
              // currentBtn[0].className = currentBtn[0].className.replace(&quot;active&quot;, &quot;&quot;)
              // this.className += &quot; active&quot;
              var id = &quot;#&quot;+this.id
              localStorage.setItem(&quot;activeBtn&quot;, id)
              console.log(localStorage.getItem(&quot;activeBtn&quot;))
              console.log(window.location)
              var location = window.location.origin + localStorage.getItem(&quot;activeBtn&quot;).replace(&quot;#&quot;,&quot;/&quot;)
              window.location.assign(location)
              // refresh()
          })
      }
  
  }
  
  function profileMenu(){
      const profileBtn = document.querySelector(&quot;.profile&quot;)
      const posts = document.querySelector(&quot;.posts&quot;)
      // const navbar = document.querySelector(&quot;.navbar&quot;)
      const menu = document.querySelector(&quot;.profile-menu&quot;)
  
      if (profileBtn!= null){
      profileBtn.addEventListener(&quot;click&quot;, function(){
          if (menu.style.display === &quot;none&quot;){
              menu.style.display = &quot;block&quot;;
          }else{
              menu.style.display = &quot;none&quot;
          }
      })
  
      if (posts != null){
      posts.addEventListener(&quot;click&quot;, function(){
          if (menu.style.display === &quot;block&quot;)
          menu.style.display = &quot;none&quot;
      })
  }
  }
  }
  
  // function like(){
  //     const btn = document.querySelectorAll(&quot;.like-btn&quot;)
  //     for (let i=0; i&lt; btn.length; i++){
  //         let current_btn = btn[i]    
  //         current_btn.addEventListener(&quot;click&quot;, function(){
  //         if (current_btn.className.includes(&quot;liked&quot;))
  //             current_btn.className = current_btn.className.replace(&quot;liked&quot;, &quot;&quot;)
  //         else
  //             current_btn.className += &quot; liked&quot;
  //         })
  //     }
  // }
  
  function new_post(){
  
      const bar = document.querySelector(&quot;.post-creator&quot;)
      if (bar != null){
      const poster = document.querySelector(&quot;.new-post&quot;)
      const homepage = document.querySelector(&quot;.homepage&quot;)
      const body = document.querySelector(&quot;body&quot;)
      const close = document.querySelector(&quot;.close&quot;)
      bar.addEventListener(&quot;click&quot;, function(){
          if (poster.style.display === &quot;none&quot;){
              poster.style.display = &quot;block&quot;
              console.log(poster.style.display)
              homepage.style.opacity = &quot;0.5&quot;
              poster.style.opacity = &quot;1&quot;
              var btn = document.querySelector('.submit')
              console.log(btn)
              btn.addEventListener(&quot;click&quot;, function(){
                  window.location.reload()    
              })
  
          }
          else{
              poster.style.display = &quot;none&quot;
              homepage.style.opacity = &quot;1&quot;
          }
      })
      
      // homepage.addEventListener(&quot;click&quot;, function(){
      //     if (poster.style.display === &quot;block&quot;)
      //     poster.style.display = &quot;none&quot;
      // })
      close.addEventListener(&quot;click&quot;, function(){
          if (poster.style.display === &quot;block&quot;){
              poster.style.display = &quot;none&quot;
              homepage.style.opacity = &quot;1&quot;
              window.location.reload()
  
          }
      })
      }
  }
  
  
  switch (document.readyState){
  case &quot;interactive&quot;:
      PageTransition()
      profileMenu()
      // like()
      new_post()
      home()
      // refresh()
      console.log(&quot;hi&quot;)
      break;
  }
  </code></pre>