I am using Visual Studio Code with Live Preview/Live Server.
I have a text area in my HTML file, and I'm trying to get its contents in my JS file with 'getElementById'. It works fine in Preview as long as the <script> tag in the HTML doesn't include 'type="module"', but once I add that in I get "ReferenceError: document is not defined". I need my JS file to import from other modules or else the size of the code will be too large.
Here is what the HTML and JS files look like:
test.html
<html>
...
<body>
<textarea id="sample_text">Hello</textarea>
<script type="module" src="./test.mjs"></script>
</body>
</html>
test.mjs
var sample = document.getElementById("sample_text");
This doesn't work in the console or in the Preview extensions.
FYI I also have a button in the HTML file and a function in the JS file that changes "Hello" to something else when you click the button, but they don't seem to be the problem that I'm encountering.
If I remove all references to modules, i.e. by removing 'type="module"' from the tag and changing '.mjs' to '.js', then it does work in Preview but I still get the error in the console. I'm reading that the problem may have something to do with Node.js not accepting 'getElementById', but the problem really seems to begin once I add modules into the code. I'm also reading that the issue might lie with how I'm previewing the code on the server-side and not browser side, but in that case I can't find any info on how to preview on the browser side. Please help if you can.
