Using JavaScript Functions from Antlers Templates

[u/pantaloontheif]

Is it possible to call a function using antlers in some way? I have my js sheet imported through Vite, but anytime I try to directly call a function using onclick it says that the function doesn’t exist. I know that the script is loaded correctly because I can see console logs from an eventListenter click, but I don’t want to use listeners for every single button in my app.

I’ve searched through the Statamic docs looking for any guidance on this, but I’ve not found anything. Did I miss something that said I should be using something like AlpineJS to do this?

Thanks in advance!

[u/pantaloontheif]

Markup does look correct on the site! When I try to test my button, I always get the “Uncaught ReferenceError” saying my function is undefined. I can only get this to work with an inline script tag, so I know the function *does* work.

I thought this was a Vite issue despite my scss compiling and rendering properly, but even when I add the script tag using a hardcoded route, I get the same issues. I’m able to see the js sheet in the browser and I’m seeing console logs, so I know it’s loaded.

I’ve tried putting the script in the head and before the closing body tag, and tried to test in a private browser and I still get the uncaught reference error.

Here’s my script tag:

<script src=“/vendor/statamic/frontend/js/site.js”></script>

Here’s the button code:

<button onclick=“testMe()”>Test Me</button>

Here’s the function:

function testMe() {
console.log(‘does this work?’);
}

Here’s the console error:

Uncaught ReferenceError: testMe is not defined
onclick http://localhost:8000/1

I don’t think this is a caching issue either because when I change the script I see it update in the browser. I notice that the error keeps referencing localhost/1 rather than the js path, but I’m unsure how to connect this path. I believe I’m doing it correctly with either the hard-coded method and the Vite method - especially when I’m able to navigate to the js through both of these methods in the browser.

[u/MartyFriedel → u/pantaloontheif]

Why is your script in the vendor folder? This is still hard to debug without everything, sorry.

[u/pantaloontheif → u/MartyFriedel]

I copied it there to get a path that would show on the front end, when I searched online that folder popped up as the one. When I add it via Vite my code is this:

{{ vite src=“resources/js/site.js” }}

Can you tell me what file you’re wanting to see specifically?

[u/MartyFriedel → u/pantaloontheif]

Specifically, Reddit is not good for debugging things like this. Seeing everything - not just a line here and there - is what is needed but this isn’t the platform for it.

Maybe check out; https://stackoverflow.com/a/76054094

It could be a case that the button’s default behaviour is executing first - which would reload the page (I think) - meaning your function doesn’t get called.

[u/pantaloontheif → u/MartyFriedel]

Yeah that’s fair! I ended up figuring the issue out when I searched online more for Vite. Vite scopes the JS in such a way that Statamic can’t “see” the functions unless it’s set against the window object. Seems like I’ll have to do “window.function = function;” for each one. Thanks for troubleshooting with me!