I have a webpage that calls a function from one javascript file on page load. This function then needs to call another function from a different javascript file.
Boiled down to its simplest form, it looks like this:
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<script type="module" src="testing2.js"></script>
<script type="module" src="testing.js"></script>
</head>
<body onload="testFunc()">
<div>
</div>
</body>
JavaScript File 1
import { returnTrue } from './testing2.js';
export function testFunc(){
console.log(returnTrue())
}
JavaScript File 2
export function returnTrue(){
return true;
}
Running this through a live server throws the following error though:
testing.html:12 Uncaught ReferenceError: testFunc is not defined
at onload (testing.html:12:27)
I know it has something to do with the fact that I’ve turned both the scripts into the type=”module in the HTML file, but I need to do that in order to import the one javascript file to the other.
Any help would be beyond appreciated. I know there’s a good chance that this has been answered already but I’ve run through dozens of different answers on the site and none of them resolve the problem 🙁