I can't use put(element, content) even after importing and exporting the function.
root/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width">
<meta name="title" content="${name}">
<meta property="og:title" content="${name}">
<meta property="og:site_name" content="Made using GBuild">
<meta property="og:description" content="GBuild is untested web game builder">
<title>${name}</title>
<link href="style/build.css" rel="stylesheet">
<script type="module" src="script/build.js"></script>
</head>
<body>
<div id="container">Hello world</div>
<script type="module" src="script/build.js"></script>
<script type="module" src="build/scripted.js"></script>
</body>
</html>
root/build/scripted.js
put('h1', 'Hello Two')
root/script/build.js
const container = document.getElementById('container');
function put (element, content) {
return container.append('<br>', `<${element}>${content}</${element}>`)
}
exports.container = container;
exports.put = put;
Edit: I did actually use express for this, so ${name} will replaced by it's value
Another edit: I already used <Express>.static() on 'script/' , 'style/' and 'build/'
Even another edit: Please see my REPLIT
ES6 modules are not CommonJS modules (and even in CommonJS modules, you still need to import from the other file, which you aren't doing). For <script type="module" - ES6 modules - you need to use the import and export keyword.
// scripted.js
import { put } from '../../build/scripted.js';
put('h1', 'Hello Two');
// build.js
export const container = document.getElementById('container');
export function put (element, content) {
return container.append('<br>', `<${element}>${content}</${element}>`)
}
You don't need the <script type="module" src="script/build.js"></script> in the HTML, because it's now being imported directly by the other module file. It's usually a good idea to choose one entry point script, and to have everything branch off of that - it makes things far easier once a project really gets going.