I have an HTML file ~/docs/index.html which has an internal JavaScript script to allow input/output with two text areas. This internal JS script, in turn, calls an external JS script ~/src/Main.js which I have imported in the head of my HTML file.
Everything seems to work great, until my ~/src/Main.js needs to import other external JS files. Then, things no longer seem to work.
~/docs/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<base href="../" target="_blank">
<!-- JavaScript imports -->
<script type="module" src="src/Main.js"></script>
</head>
<body>
<main>
<div>
<textarea
id="input"
oninput="update()"
placeholder="Type here!"
></textarea>
<textarea id="output" readonly>no way</textarea>
</div>
<!-- Textarea script -->
<script>
// Updates the textarea
function update() {
let input = document.getElementById("input");
let output = document.getElementById("output");
output.value = doubleIt(input.value);
}
</script>
</main>
</body>
</html>
~/src/Main.js:
import "./OtherClass.js"; // THIS LINE BREAKS THINGS
export function doubleIt(input) {
return input + input;
}
I've seen this question but the solutions there don't seem to work for me. Any help appreciated.
Every script that uses the import / export syntax that is included in the DOM must have type="module" attribute.
If the inline script uses any functions from a module, then they also need to be imported first.
Note: avoid inline event listeners like oninput and add event listeners through JavaScript, as with modules the update function will no longer be a global value.
<script type="module">
import { doubleIt } from "./src/Main.js";
let input = document.getElementById("input");
let output = document.getElementById("output");
function update() {
output.value = doubleIt(input.value);
}
input.addEventListener('input', update)
</script>