Dynamically calling a function outside of a javascript module

Question

I have the following javascript class in foo.js:

export default class Foo {
  constructor(html) {
    this.html = html;
  }
}

which I'm importing and using as follows within select.js:

import Foo from './foo.js'

var html = ``;
let array = ['bar', 'baz', 'boom']; // etc. etc.
for (var i = 0; i < array.length; i++) {
  let element = array[i];
  html += `<a onclick=`select('${element}');`>element</a>`;
}
let foo = new Foo(html);
$(`select`).html(foo.html);

function select(name) {
  let foo = new Foo('foo'); // still module access ...
  console.log(`foo.html = ${foo.html}`);      
  console.log(`name = ${name}`);
}

The select element is defined in index.html as:

<div id="select"></div>
<script type="module" src="./select.js"></script>

where I have imported the select.js file as a module.

However, I am getting the following error when I run this:

(index):1 Uncaught ReferenceError: select is not defined at HTMLAnchorElement.onclick ((index):1)

I need to have access to the class Foo so this javascript must be a module. Is there anyway to achieve having the scope of select within the index.html file?

Edit

A solution proposed in the comments could be to assign a unique handler to each id of the link elements after they have been embedded into the html, but this seems like a slightly verbose solution.

[Don't use inline attribute event handlers](https://stackoverflow.com/q/6941483/1048572). Just `$('select-foo').click(selectFoo)` instead. — Bergi, Nov 30 '19 at 22:19
Also see https://stackoverflow.com/questions/23976714/pros-and-cons-of-various-function-scopes-event-binds-in-javascript-jquery — Bergi, Nov 30 '19 at 22:39
@Bergi Thanks for these suggestions. I guess what I'm currently doing is building up complex code using a large for loop and dumping it into the `select-foo` div (i.e. `$(`select-foo`).html(foo.html);`, where `foo.html` is a massive string). Since the elements don't exists until the string is built I can not use the `$('').click(...)` method. — ajrlewis, Nov 30 '19 at 22:54
@Bergi Interestingly the problem discussed in the first link is similar to my issue where I use multiple different calls the the JS function. I'll update the question to make this clearer. — ajrlewis, Nov 30 '19 at 23:27
Well, don't build a massive html string. Build a dom (or jQuery) object, or build a html string without handlers and then attach them after you created the elements. You can use data attributes (or just parse the element text) if you need to pass per-element data into the function call. — Bergi, Dec 01 '19 at 00:04
@Bergi Thanks -- so if I went via the html string method, would I add a unique ID to each element, then add the handler after I've injected into into the div element? if the loops are massive, would this take up a lot a memory if the handlers were large? Thanks again — ajrlewis, Dec 01 '19 at 00:16
Not an id, just the `element` data. (Unless the data itself is large and better stored id-indexed in a place where the handler can access it). And no, if the handlers were large it would actually be beneficial not to put them in the html markup. — Bergi, Dec 01 '19 at 00:21
@Bergi Thanks. Just to clarify: say the handler implemented an `ajax` call to the server using the `element`'s name, would having 1,000 handlers each with their own `ajax` call using the unique `element`'s name be the wrong approach? — ajrlewis, Dec 01 '19 at 00:32
Why make a thousand handlers? A single handler function will suffice that is installed on 1000 elements. Or even use event delegation and install it only once on the root element. — Bergi, Dec 01 '19 at 00:37

Dynamically calling a function outside of a javascript module

0 Answers0