Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Referring js file in asset folder.

Solved

Referring js file in asset folder.

gemlette
Excursionist
28 0 7

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>
Accepted Solution (1)
Webstablish
Shopify Partner
71 12 15

This is an 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.

MenuQoL: Hide & Copy Menus | Tutorial
- Hide your seasonal menu items instead of throwing them away
- Copy navigation menus to save time

View solution in original post

Replies 7 (7)

Webstablish
Shopify Partner
71 12 15

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?

MenuQoL: Hide & Copy Menus | Tutorial
- Hide your seasonal menu items instead of throwing them away
- Copy navigation menus to save time
gemlette
Excursionist
28 0 7
Webstablish
Shopify Partner
71 12 15

Webstablish_0-1728660340495.png

 

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.

MenuQoL: Hide & Copy Menus | Tutorial
- Hide your seasonal menu items instead of throwing them away
- Copy navigation menus to save time
gemlette
Excursionist
28 0 7

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

Any way to get the full URL of the asset?

Webstablish
Shopify Partner
71 12 15

This is an 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.

MenuQoL: Hide & Copy Menus | Tutorial
- Hide your seasonal menu items instead of throwing them away
- Copy navigation menus to save time

Race
Shopify Partner
5 0 4

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

gemlette
Excursionist
28 0 7

Yes this is the angel_number.js

 

 Screenshot 2024-10-11 at 11.06.50 PM.png