0

I want to import ES6 modules into my code. So I had to make my own script an ES6 module because else it is not possible. My code looks like this:

index.html:

<script type="module" src="script.js"></script>
<script>console.log("html is executed");</script>
<div id="display">1 is selected</div>
<select onchange="changed()"><option selected>1</option><option>2</option></select>

script.js:

window.changed = function()
{
  document.getElementById("display").textContent = event.target.value;
}
console.log("script.js is executed");

The console output looks like this. Please look exactly at the output. The HTML is executed before script.js.

html is executed
script.js is executed

The problem is that it's possible the user changes the drop down and an error happens because changed() isn't yet defined. That is when the page loads slowly. I verified this and it really happens.

I could assign the .onchange programmatically in the script. But then it is possible that the user changes the value and nothing happens because .onchange is not assigned yet (when the page loads slowly). Also I'd have to check in script.js if the user has changed the value while .onchange wasn't assigned yet.

It's a little sad because without type="module" everything works fine. But now I have to extra code and things get more complex.

Isn't it possible to execute an ES6 module before the subsequent HTML code is executed? Just like a normal JS script?

Note on possible duplicates

This is not a duplicate of Execution order of ES6 imports, in HTML and in code. Also it's not a duplicate of What is the defined execution order of ES6 imports?. (Both questions are about having multiple modules).

Update

Unfortunately setting async="false" defer="false" on the script tag didn't help.

Also in the comments was said that the module is loaded before DOMContentLoaded is fired. But how does that prevent the user from changing the drop down before the page has loaded (firing an onchange event)?

halfer
  • 19,824
  • 17
  • 99
  • 186
zomega
  • 1,538
  • 8
  • 26
  • 1
    You should not have any issues with `type="module` scripts. They're loaded like normal scripts with [defer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer) attribute ("_script is ... executed after the document has been parsed, but before firing DOMContentLoaded_"). That means it's not possible for a user to change the option before the script will be run. Anyway, I'd recommended always to attach events programmatically, inline listeners are a very flawed way to attach listeners. – Teemu Feb 22 '23 at 09:54
  • Why have you introduced an onchange event on select element when you've resize issues within an iframe and body element ..? Like said, inline listeners are a flawed way, just don't use them. It's notable, that when ever your code goes through a security audit, it will fail because of inline listeners. – Teemu Feb 22 '23 at 10:02
  • @Teemu "That means it's not possible for a user to change the option before the script will be run.". That is not true. I wrote a PHP script which never stops loading. I get an error when I try to change the drop down. – zomega Feb 22 '23 at 10:27
  • Malfunctioning is not standardized. – Teemu Feb 22 '23 at 10:31
  • It's definitely possible to trigger events before the page has loaded and thus the module has not been executed yet. – zomega Feb 22 '23 at 10:32
  • Why not to ask about your real issue instead of all this unrelated stuff? – Teemu Feb 22 '23 at 10:34
  • @Teemu The example in the question exactly reflects my problem. – zomega Feb 22 '23 at 10:35
  • (I don't have a view on whether this is a duplicate of anything, but it's worth noting that early insistences that a question is not a duplicate can cause people to look closer at that issue, and thus the meta-commentary designed to stop the question closing caused it to be closed. And of course there may be a perfect duplicate out there - it is not a bad thing to be signposted to an existing answer). – halfer Feb 22 '23 at 17:35

0 Answers0