I am trying to import a function (that is in its own js file) inside the script of my index.html so I can use it for example with a button onclick. I dont want to define the function in the script because it will be too polluted.
This is what I am trying on a very simplified version, for tests:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="show()">Click Me</button>
<p id="result"></p>
</body>
<script>
import { sum } from './myFunc.js'
const show = () => {
document.getElementById("result").innerText = sum(2, 4);
}
</script>
</html>
myFunc.js:
export function sum(a, b) {
return a + b
}
Would I need something else that I am missing? I already searched a lot, but nothing helped me yet.
This is the error I get: SyntaxError: Unexpected token ‘{‘. import call expects one or two arguments.
And if I click the button it can’t find the function show(), as it never made it past the import line.