Difficulty with external JS file

Developer Support CMS Development
1

Hi, I have difficulty to make my function work in module.html(html + hubl). I have external javascipt file and I added the js file to using Linked Files.

I am in my module.html (footer), I want to use my function.

This is just an example.

function setText() {

return new Date().getFullYear();

}

In my module.html.

<p class=“mb-24 md:mb-0 font-display text-16 md:float-left text-paper text-opacity-50”>© <Here>

I want to call the function setText()

HubSpot. All Rights Reserved.</p>

Screen Shot 2022-02-16 at 5.36.43 PM.png
Screen Shot 2022-02-16 at 5.36.43 PM.png718×478 37.5 KB

I want to use alpine to display it. The entire site has alpine which was used in header.

<span x-text=“setText()”></span>

But it is not displaying at all. What Can I do?

2

@AOjulari

Are you still working on this? Do you get any errors? Do you have an example?

3

Hi, thanks no error but it is not displaying for some reason.

4

Hi @AOjulari ,

I think the problem is in your code. I simplified and code and recommend do this inside module first.

module.html

<p class="mb-24 md:mb-0 font-display text-16 md:float-left text-paper text-opacity-50"><span class="time"></span> All Rights Reserved.</p>

module.js

document.querySelector(".time").innerHTML = new Date().getFullYear();

The code above explained I’ve created a scripted that would set the current year then append that value to the span tag with a classname.

The reason why your code doesn’t work is because you need to save your function as a variable and pass it to the HTML, remember, JS is all about client side, so it won’t render as is. If this is a backend language, then it will all makes sense.

Hope that helps :wink:

5

Hi,

<span x-data="{ settext: setText() }" x-text="settext"></span>

Thanks! But I was able to solve it by using

Thank you all.

6

Hi @AOjulari , glad you have your solution, sorry didn’t saw that you’re using a JS framework (Alpine).