Wandering down a bit on MDN and on WHATWG, I saw that type="module"
allows loading javascript modules on a webpage. But how do you execute the code defined in the module?
I have this module:
console.log('Starting module 1');
function addLiElement(text) {
var li = document.createElement('li');
li.classList.add('js-module-2');
li.appendChild(document.createTextNode(text));
document.querySelector('.output').appendChild(li);
}
console.log('End of module 1');
export default addLiElement;
The script is loaded in the webpage using <script type="module" src="module.js"></script>
in <head>
.
Now, if I call this classic javascript (in a <script src="mysqcript.js"></script>
):
window.addEventListener('load', function () {
addLiElement('Hello, I am a basic code.js');
});
Then Firefox says that the addLiElement
function does not exist. If I use import {addLiElement} from "module-1.js";
, then Firefox says that import
can only be used inside modules. And the module's console.log
do not appear inside the console.
So, Can we link normal javascript to modules? If so, how?