custom javascript not working on website page

I’m trying to add some animation to my CTAs using vanilla JS:

My issue is that the html collection gotten from the top line is appearing empty when i try to iterate it. I’m doing a lot of console.logs to test and see where the breaking point is but the issue is there. When i put my code in the console on Chrome i have no issue. Any thoughts on what could be wrong? I’m pretty new to JS so I might be making a simple mistake.

Hello @NGraham1 ,

Did you link your script correctly, like at the bottom of the Body HTML element or somewhere else?
Do you use your script in a module?

Best regards,

Özcan

Hi @NGraham1 ,
There may be many reasons to js not working like js not written under <script></script> tag if you applying it in template or page level and if you are adding js in the module make sure you add js code in js editor of module
I see your code if you adding js as I mentioned above then try this in your code
Add dot(.) with classname
i.e .learn-more-cta


if it does not work try to add animation by getElementById
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

Hi @NGraham1, the code seems okay to me, so maybe the issue is not JS related but maybe is related to where you add this code as @Oezcan says.

Please share more information about the location of the code and I’m sure we will find the issue :slightly_smiling_face:

Thanks for the suggestions! It is linked to the right place because my console.logs were showing up in the browser. I did find a solution though.

window.addEventListener('load', function () {
 //I PLACED MY CODE IN HERE AND IT FIXED IT
 });

I found this snippit from this post where someone was trying to target elements in a form.

I’m not sure why this is requred but I would also like to know why it’s not common knowledge if it is requried. And why was the answer so hard to find?

Questions for hubspot I suppose. Thanks for the suggestions everyone!