1

Extract from HTML file:

    <script src="start_run.js" type="module"></script>
<!--    <script src="start_run.js"></script>-->

</head>
<body onload="start( 'box1' );">
    <div class="container-fluid">
        <div class="row w-100">
            <div id="box1" class="col-lg-12 col-md-12" style="overflow: hidden;">
             ...

... where start is an exported method in the file start_run.js.

With no type="module" it works. After I include it I get "start is not defined".

I find that it is possible to do this in the .js file:

document.body.onload = function( param ){
    start( 'box1' );
}

This then runs as expected on load. But then I find that I have no obvious way for the HTML file to call this function with a parameter of its choosing.

NB I've also tried putting this as an inline attempt:

<body onload="import { start } from './start_run.js'; start( 'index_file_box1' );">

... but that gives the error "import declarations may only appear at top level of a module".

What might I do about this?

Edit

As I understand it from ClearPerformance's answer referenced in their comment, this may then be the way to pass a parameter out:

<script>
    const myGlobalVar = 'box1';
</script>

... though I can imagine that's probably terrible global pollution practice.

mike rodent
  • 14,126
  • 11
  • 103
  • 157
  • See the bottom part of the answer [here](https://stackoverflow.com/a/59539045) - module scope is not global, and inline handlers should never, ever be used anyway. Attach the listener properly using `addEventListener` instead - Javascript should call other Javascript, rather than inline handlers in the HTML calling Javascript – CertainPerformance May 25 '20 at 14:53
  • Thanks. I knew that modules had been invented (partly at least) to address scoping problems. But not much more, clearly. – mike rodent May 25 '20 at 15:10

0 Answers0