javascript - Font awesome icon js file issue

Question

So i have a font awesome icon with an id of facebook,i put that in a variable in JavaScript with getelementbyid method in main.js file in index.html when i clicked on the the icon , it is opening without any issue.
but on other pages in the website it is not opening when the id and the code is same.the main.js is loaded at the end .the icon has same id on each page and i am calling it with the same js file , but i am failed to understnad how is it opening on the index.html but not on other pages.

------------------------------------------------------------------------

HTML CODE

 <footer>
          <p>All Rights Reserved</p>
          <div id="footicons">
               <i class="fab fa-facebook fa-1x"></i>
               <i class="fab fa-instagram-square fa-1x"></i>
               <i class="fab fa-twitter fa-1x"></i>
          </div>
     </footer>

     <script src="/js/main.js"></script>
</body>

</html>

---------------------------------------------------------

Javascript code

let facebook = document.querySelector(".fa-facebook");

function openfblink() {
  window.location = "https://www.facebook.com";
}

facebook.addEventListener("click", openfblink);

question from:https://stackoverflow.com/questions/65858230/font-awesome-icon-js-file-issue

Answer 1

Can you make sure you are pointing to the right place for the JS file? If the other files you are trying to access the JS from is in another folder than index.js, the path will be different.