Access a function from HTML (?)

Hi again :)

I am working on an app in which the content of the blend4web module mostly reacts to input from other parts of the website like clicking HTML elements.
I learned a way to accomplish that by using "addEventListener"s for each button I want to have. That works fine for testing but it might not be practical for what I am trying to do.
For example, I'd like to be able to add .json scenes and be able to switch to any of them without creating new listeners for each individual one. Same with textures: I want to have a somewhat large texture library on the site (that can be applied to models inside the b4w app) that I can extend at any point. I think it would be weird to add 10-100 listeners to my script and update it every time I add new textures.

Another thing I find weird about "addEventListener" is that it won't allow you to pass arguments to the function it calls (although I guess there must be a good reason for that).

I tried using
onmousedown="my_b4w_function()"
in html elements but I get a "my_b4w_function is not defined" error which I guess is because the function is inside my custom module and I am not accessing it correctly. As I was researching I also read that using onmousedown is not considered good practice for some reason.

So I hope this makes sense and my question is how would an experienced programmer approach this problem.

Hi,

I think it would be weird to add 10-100 listeners to my script and update it every time I add new textures.

Yep, it is better to have some JSON config with all options available and automatically create HTML elements in runtime and attach event listeners to them in a loop. This config can be static text file or can be generated on the server.

Another thing I find weird about "addEventListener" is that it won't allow you to pass arguments to the function it calls (although I guess there must be a good reason for that).

Instead, the callback function can perfectly accept arguments.

I tried using
onmousedown="my_b4w_function()"
in html elements but I get a "my_b4w_function is not defined" error which I guess is because the function is inside my custom module and I am not accessing it correctly. As I was researching I also read that using onmousedown is not considered good practice for some reason.

This code assumes there is a globally declared function in your JavaScript. It is better to use event listeners.

You might take a look at the source code of this example:
https://www.blend4web.com/en/demo/tut_playroom/

Hope this helps!