javascripthtmldebuggingvisual-studio-debuggingissue-tracking

JavaScript components working in testing mode but not after published live

I've created a simple website template with HTML, CSS, and JavaScript. I tested it manually in Live Server mode (Visual Studio Code), and everything worked fine. I've updated the website's code, and while running it live, I noticed that the features depending on JavaScript don't work.

I'm talking about 2 features having the issue:

  1. Hamburger menu button on mobile should open the drop-down menu
    enter image description here

  2. The left and right buttons in the slider component should move the slides.
    enter image description here

All these features worked perfectly while testing but they doesn't work after updated to the live website. I'm sure that the folders are properly updated and I'm sure that this isn't a cache issue.

You may check out the code source here: https://github.com/NoToolsNoCraft/Basic-website-template-optimized-for-Desktop-and-Mobile

You may check out the app live here: https://notoolsnocraft.tech/basic-website-template-optimized-for-desktop-and-mobile/

Solution

  • The final fix turned out to be way simpler than I thought it would be. After Yogi suggested I check out the Network tab, I found out that some wrong paths in my JavaScript references were the culprits. Both JS files I mentioned were throwing 404 errors there.

    Initially, I had linked the JS files in my HTML like this:

    <script src="/sliderComponent.js"></script>
<script src="/hamburgerMenu.js"></script>

    The issue was those leading slashes ("/") in the paths made the browser look for the files in the root directory of the domain, treating them as if they were in the top-level folders. But actually, my JS files were located in the same folder as the index.html file, following this structure:

    https://notoolsnocraft.tech/basic-website-template-html-css-js/hamburgerMenu.js https://notoolsnocraft.tech/basic-website-template-html-css-js/sliderComponent.js

    To fix it, I just removed the leading slashes from the paths and made them relative to the current directory:

    <script src="sliderComponent.js"></script>
<script src="hamburgerMenu.js"></script>

    Now, the script references point to the right JS files in the same folder, and everything is working perfectly! Also, big thanks to both Yogi and Ferid for the help :)