How to reference one element from inside another element?

Hi Robert,

Assuming utils.js is the script library and the calculator scripts are init script, you can just enqueue 1 utils.js on the wp_head of the site and enqueue the init script on wp_footer.

If you have the URL of the utils.js script you can just hook in it using a Hook element with a hook set to wp_head.

You then add your code. Example:

<script src="https://yoursite.com/folder/to/file/js/utils.js" type="text/javascript"></script>

You can then set it's display rule location to entire site or just the pages that will be using it. :D

Thank you Elvin. For some reason I am not able to get this to work. Here is what I am using in the Elements. The first script is the utils file I have pasted in a header hook element. The second script is the calculator I have in a footer hook element. I also have some css styles that I added to the same footer hook element below the calculator script.

Am I missing something obvious here?

Hi there,

How are you adding that javascript, exactly?

Is it in a JS file? Or are you pasting it inline like that? If inline, are you adding <script></script> tags around it? Are you using a Hook Element?

Yes I am using a hook element and pasting inline the the <script></script> and <style></style> tags. Should I be doing this some other way?

Can you link us to the page that's using this code?

Also, can you try hooking both scripts on the footer of the site and let us check?

Sure, here is a test page.

The script is actually being added but it's returning an error as shown here -

Can you try adding type="module" attribute to the <script> tag?
https://share.getcloudapp.com/Wnuqzm9g

This is loading now, however I'm not able to import anything from the utils module. How do I reference the file? Right now I have:

import { amountConfig, insertErrorMessage, numberWithCommas, removeErrorMessage } from "../utils/utils.js";

But I don't think that from ".../utils/utils.js"; part is correct. How to do reference the location of the other utils element I created?

But I don’t think that from ".../utils/utils.js"; part is correct. How to do reference the location of the other utils element I created?

You can't do this as scripts done within the Hook elements are not saved on a file. They are directly embedded to the code of the page.

If you wish to add in a path, you'll have to do something like:

<script src="https://yousite.com/folder/path/to/file/utils.js" type="module" defer=""></script>

Instead of adding the actual codes on a hook element.

Okay, understood. So if I want to upload this javascript file manually via ftp, which folder do I put it in exactly and what will the path be to that file?

Okay, understood. So if I want to upload this javascript file manually via ftp, which folder do I put it in exactly and what will the path be to that file?

I suggest installing a child theme for this so you can upload it on the child theme's folder.

Example path would be wp-content/themes/your-child-theme-folder/assets/js/

Okay, so I've uploaded the file. Now how do I find the url to access that file?

The URL path is similar to the FTP path.

so for example, if you have uploaded it to theme folder, it's usually something like this:

https://www.yoursitedomain.com/wp-content/themes/your-theme-folder/another-folder/utils.js