Referring js file in asset folder.

[gemlette]

I created this for a poster generator. 
The code references an asset.js file to pull copy. 
But asset.js is angel_number.js but it is not pulling the data. 

What am I doing wrong?

<div class="poster-creator-wrapper">
    <style>
        /* Scoped styles for the poster creator */
        body {
            margin: 0;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .poster-creator-wrapper {
            font-family: 'Georgia', serif;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f9f9f9;
            color: #333;
            max-width: 400px;
            margin: 0 auto;
            position: relative;
            z-index: 100;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .input-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        .poster-input {
            padding: 10px;
            font-size: 1em;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 24px;
            width: 100%;
            font-family: 'Georgia', serif;
            font-weight: bold;
            text-transform: uppercase;
            color: #40E0D0;
            text-align: center;
        }
        .poster-input::placeholder {
            color: #aaa;
            opacity: 1;
            font-size: 0.8em;
        }
        .poster-input:focus {
            border-color: #40E0D0;
            outline: none;
        }
        .poster-button {
            padding: 10px 20px;
            background-color: #fff;
            border: 2px solid #40E0D0;
            color: #40E0D0;
            cursor: pointer;
            border-radius: 24px;
            transition: background-color 0.3s, color 0.3s;
            margin-top: 10px;
            font-family: 'Georgia', serif;
            font-size: 0.6em;
            text-transform: uppercase;
        }
        .poster-button:hover {
            background: #40E0D0;
            color: white;
        }
        #poster {
            width: 100%;
            height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            margin-top: 20px;
            overflow: hidden;
            background-color: #f0f0f0;
            border-radius: 10px;
        }
        #background-image, #wing-image {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
        }
        #wing-image {
            max-width: 200px;
            height: auto;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #angel-number-display, #angel-number-headline, #meaning-display {
            position: absolute;
            text-align: center;
            z-index: 10;
            display: none;
        }
        #angel-number-display {
            font-size: 64px;
            font-weight: bold;
            top: 25%;
        }
        #angel-number-headline {
            font-size: 16px;
            top: 40%;
            left: 25px;
            right: 25px;
            margin: 20px 0;
        }
        #meaning-display {
            font-size: 12px;
            top: 55%;
            left: 25px;
            right: 25px;
            text-align: justify;
        }
        .poster-silhouette {
            width: 100%;
            height: 100%;
            background: rgba(64, 224, 208, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: white;
            position: absolute;
            z-index: 5;
            text-align: center;
            flex-direction: column;
        }
    </style>

    <div class="input-container">
        <input type="text" id="angel-number" class="poster-input" placeholder="Enter your angel number" />
        <button class="poster-button" id="generate">Generate Poster</button>
    </div>

    <div id="poster">
        <div class="poster-silhouette" id="silhouette">
            MANIFEST YOUR<br>ANGEL NUMBER MEANING
        </div>
        <img id="background-image" />
        <img id="wing-image" />
        <div id="angel-number-display">111</div>
        <div id="angel-number-headline"></div>
        <div id="meaning-display"></div>
    </div>

    <button class="poster-button" id="download">Download Poster</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="{{ 'angel_number.js' | asset_url }}"></script>
    <script>
        const generateButton = document.getElementById('generate');
        const angelNumberDisplay = document.getElementById('angel-number-display');
        const angelNumberHeadline = document.getElementById('angel-number-headline');
        const meaningDisplay = document.getElementById('meaning-display');
        const backgroundImage = document.getElementById('background-image');
        const wingImage = document.getElementById('wing-image');
        const silhouette = document.getElementById('silhouette');

        const backgrounds = ['https://i.imgur.com/X6sFcd4.png'];
        const wings = ['https://i.imgur.com/6p33W70.png'];

        function generatePoster() {
            const angelNumber = document.getElementById('angel-number').value;
            console.log('Entered angel number:', angelNumber); // Log input value
            const angelData = angelNumbers[angelNumber]; // Fetch data from the external JS file

            if (angelData) {
                angelNumberDisplay.textContent = angelNumber;
                angelNumberHeadline.textContent = angelData.headline; // Set headline from fetched data
                meaningDisplay.textContent = angelData.meaning; // Set meaning from fetched data

                angelNumberDisplay.style.display = 'block';
                angelNumberHeadline.style.display = 'block';
                meaningDisplay.style.display = 'block';
                silhouette.style.display = 'none';

                backgroundImage.src=backgrounds[0];
                backgroundImage.onload = () => { backgroundImage.style.display = 'block'; };
                wingImage.src=wings[0];
                wingImage.onload = () => { wingImage.style.display = 'block'; };
            } else {
                silhouette.style.display = 'flex';
                angelNumberDisplay.style.display = 'none';
                angelNumberHeadline.style.display = 'none';
                meaningDisplay.style.display = 'none';
            }
        }

        function downloadPoster() {
            const poster = document.getElementById('poster');
            html2canvas(poster).then(canvas => {
                const link = document.createElement('a');
                link.href = canvas.toDataURL('image/png');
                link.download = 'poster.png';
                link.click();
            });
        }

        generateButton.addEventListener('click', function() {
            console.log('Generate button clicked'); // Debug log
            generatePoster();
        });
        
        document.getElementById('download').addEventListener('click', downloadPoster);
    </script>
</div>

[Webstablish]

Hi @gemlette,

Are you saying the code inside "angel_number.js" does not run on load? Do you see any errors in the browser console? What URL does it show in the final page source?

[gemlette]

This is the URL
https://gemlette.com/pages/angel-number-poster

[Webstablish]

As you can see, the asset URL is not correctly processed. It should show the full link here. What I notice in the screenshot below, is that you have a space between 'angel_number' and '.js'. You should probably remove that.

[gemlette]

there is no space. 
but to make sure I have removed the spacing. 

Any way to get the full URL of the asset?

[Webstablish · Accepted solution]

Honestly it's very difficult to tell why it isn't working. If I were you, I would make a new file in which you only load the angel_number.js asset. If that works, it must be something in the rest of your code. Copy it over part by part to the new file until you find the culprit.

[Race]

Can you double check your assets folder in your code base and confirm that "angel_number.js" exists?

[gemlette]

Yes this is the angel_number.js