Why aren't my JavaScript files loading when my webpage opens?

Technical Q&A
, , ,
1

I’ve added some JavaScript files into my assets folder and linked them in a new HTML file I created under templates. The scripts seem to be linking correctly with the HTML file when I view the page source, but they do not run when I open the page. However, they do work from the local file I have saved on my computer so I know there are no errors in the code.

I’ve tried linking them in theme.liquid, placing them in the section of the HTML, attempting different ways of linking the sources, and added defer or async tags but still no luck.

I thought maybe it was an issue with the timing in loading the page, whereas the JavaScript files are being loaded prior to the HTML for some reason, but I do not know how to add that into the code if that is the case.

HTML (both enterwebsiteapp.js and cloudflare.com sources seem to be linked properly when I check the ‘view page source’ but do not work when I open the page)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Enter Website Page</title>
    <link rel='stylesheet' type='text/css' media='screen' href='{{ 'enterwebsitestyle.css' | asset_url }}'>
</head>

<!-- ENTER WEBSITE BUTTON -->
<body>
    <header class="hide">
        <nav>
            <a href="https://freakthecompany.com/"><img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/logo.png?v=1699035027" alt="enter website" class="button" width=200px height=200px></a>
        </nav>
    </header>

<!-- BACKGROUND IMAGES (KEEP IN SAME ORDER AS LAYERS OF PHOTOSHOP FILE FROM BOTTOM TO TOP) -->
    <main>
        <div class="vignette hide"></div>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/background.png?v=1699035034" data-speedx="0.2" data-speedy="0.26" data-speedz="0" data-rotation="0" data-distance="-200" class="parallax backgroundimage"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/eye.png?v=1699035027" data-speedx="0.024" data-speedy="0.01" data-speedz="0.53" data-rotation="0.2" data-distance="-300" class="parallax eye"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/stage.png?v=1699035028" data-speedx="0.02" data-speedy="0.06" data-speedz="0.08" data-rotation="0.03" data-distance="2000" class="parallax stage"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/people_shadow.png?v=1699035027" data-speedx="0.04" data-speedy="0.08" data-speedz="0.12" data-rotation="0.05" data-distance="2300" class="parallax peopleshadow"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_1.png?v=1699035027" data-speedx="0.070" data-speedy="0.1" data-speedz="0.03" data-rotation="0.06" data-distance="2600" class="parallax layer1"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_2.png?v=1699035027" data-speedx="0.065" data-speedy="0.07" data-speedz="0.05" data-rotation="0.08" data-distance="2800" class="parallax layer2"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_3.png?v=1699035028" data-speedx="0.065" data-speedy="0.10" data-speedz="0.07" data-rotation="0.08" data-distance="3000" class="parallax layer3"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_4.png?v=1699035028" data-speedx="0.065" data-speedy="0.11" data-speedz="0.10" data-rotation="0.08" data-distance="3200" class="parallax layer4"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_5.png?v=1699035035" data-speedx="0.065" data-speedy="0.13" data-speedz="0.12" data-rotation="0" data-distance="3500" class="parallax layer5"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_6.png?v=1699035028" data-speedx="0.059" data-speedy="0.2" data-speedz="0.06" data-rotation="0.12" data-distance="3800" class="parallax layer6"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_7.png?v=1699035028" data-speedx="0.059" data-speedy="0.12" data-speedz="0.12" data-rotation="0.15" data-distance="4000" class="parallax layer7"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_8.png?v=1699035028" data-speedx="0.065" data-speedy="0.15" data-speedz="0.10" data-rotation="0.1" data-distance="4200" class="parallax layer8"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/layer_9.png?v=1699035028" data-speedx="0.06" data-speedy="0.13" data-speedz="0.11" data-rotation="0.17" data-distance="4400" class="parallax layer9"width=200px height=200px>
        <img src="https://cdn.shopify.com/s/files/1/0609/6427/4366/files/black_shadow.png?v=1699035027" class="shadow hide"width=200px height=200px> <!-- does not have parallax class as it needs to stay static -->
    </main>

    <script type='text/javascript' ref='{{ 'enterwebsiteapp.js' | asset_url }}' defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js" defer></script>
</body>
</html>

JavaScript of enterwebsiteapp.js

var parallax_el = document.querySelectorAll(".parallax");
var main = document.querySelector("main");

var splashScreen = document.getElementById('splashScreen');
splashScreen.addEventListener('click', function () {
    splashScreen.style.opacity = 0;
    setTimeout(function () {
        splashScreen.classList.add('hidden');
    }, 610);
});

// PARALLAX EFFECT
var xValue = 0,
    yValue = 0;
var rotateDegree = 0;

function update(cursorPosition) {
    parallax_el.forEach(function (el) {
        var speedx = el.dataset.speedx;
        var speedy = el.dataset.speedy;
        var speedz = el.dataset.speedz;
        var rotateSpeed = el.dataset.rotation;

        var isInLeft = parseFloat(getComputedStyle(el).left) < window.innerWidth / 2 ? 1 : -1;
        var zValue = (cursorPosition - parseFloat(getComputedStyle(el).left)) * isInLeft * 0.1;

        el.style.transform =
            'perspective(2300px) translateZ(' + zValue * speedz + 'px) ' +
            'rotateY(' + rotateDegree * rotateSpeed + 'deg) ' +
            'translateX(calc(-50% + ' + -xValue * speedx + 'px)) ' +
            'translateY(calc(-50% + ' + yValue * speedy + 'px))';
    });
}

update(0);

window.addEventListener("mousemove", function (e) {
    xValue = e.clientX - window.innerWidth / 2;
    yValue = e.clientY - window.innerHeight / 2;
    rotateDegree = xValue / (window.innerWidth / 2) * 20;
    update(e.clientX);
});

// SCENERY WIDTH ADJUSTMENT
/*
if (window.innerWidth >= 725) {
    main.style.maxHeight = window.innerWidth * 0.6 + "px";
} else {
    main.style.maxHeight = window.innerWidth * 1.6 + "px";
}
*/

// GSAP ANIMATION SCENERY
Array.prototype.slice.call(parallax_el).filter(function (el) {
    return !el.classList.contains("eye");
}).forEach(function (el) {
    var timeline = gsap.timeline();
    timeline.from(el, { top: el.offsetHeight / 2 + +el.dataset.distance + "px", duration: 3.2, ease: "power3.out" });
});

Any help would be greatly appreciated, thank you!

2

Hi @Iwells0130 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Hey!

I figured it out, I added the JavaScript inline between tags in the HTML code. As well, I had previously converted the JavaScript to ES4 thinking that file minification had been the issue, and had to reconvert it to ES5 format.