Can't access module.js functions from module.html

Developer Support CMS Development
1

I’m quite confused and hoping I’m just missing something obvious. I seem to be unable to access my JS functions specified in module.js from module.html. Console reports that the function is undefined.
From what I’m seeing there is no relation between the module html and js file, which makes me wonder why it’s even there in the first place. If a js file is created with your module, then shouldn’t it be included and accessible? This seems crazy to me. I’d assume the whole reason this is setup as such is to provide convience and scoping for the local module instance, but that doens’t seem to be the case.
I know we can add an event listeners for click to trigger the function, but that is not helpful at all when you need to pass data to the function. Please tell me I’m missing something obvious.
A simple example of my use case is:
- I have 3 instances of the module I created, each with a different logo, description, and webiste url
- When a user clicks on 1 of the 3 instances I pop up a message displaying additional info as well as the information listed above
If I have to rely on event listeners, then querying for the particulat instance is a massive pain, and passing a bunch of data about that specific instance is also an indirect pain, espiecally when the following seems like it shoudl be feasible:

// module.html
<button class="button hs-button" onclick="onClick('{{module.company_logo}}', '{{module.nhd_company_name}}')">
 {{module.button_text}}
</button>

// module.js
function onClick(logo, name) {
 console.log('--------- do some things');
}
2

Hi @SeanOCR,

from my experience the module.js can’t really access the module.html information. While you can write JS into it but it will only get loaded once if you’re using several instances of the module on one page.

If you like to have individual JS parts, put the required and individual JS into the module.html like

<button class="button hs-button" id="button-{{ name|md5 }}">
 {{module.button_text}}
</button>

{% require_js %}
<script>
var button = document.getElementById("button-{{ name|md5 }}");

button.addEventListener('click', (event) => {
 console.log() {# do something #}
});
</script>
{% end_require_js %}

Also:

{{ module.company_logo }}

will print a whole object like

{alt=social-sharing, height=150, loading=lazy, max_height=150, max_width=131, size_type=auto, src=image-path, width=131})

Therefore you should specify what you need like

{{ moudle.company_logo.src }} {# for image path #}
{{ moudle.company_logo.alt }} {# for alt-text #}
{{ moudle.company_logo.width }} {# for image width #}
{{ moudle.company_logo.height }} {# for image height #}
{{ moudle.company_logo.size_type }} {# for image size type #}
{{ moudle.company_logo.loading }} {# for image loading #}

best,

Anton

3

Thank you Anton, I apprecaite you taking the time to reply :slightly_smiling_face: While I appreicate the code snippet, it was exactly what I was hoping to avoid as I’ve seen this as the common practice for this and was really hoping I was missing something. Seems so silly to have a module.js if it has no real relationship to the module itself :confused: