Menu
I have 2 files the first one is an HTML file the other one is a javascript file. What I was trying to do was define a variable on the javascript file and access it on the Html side. Is it possible? A rough code is attached below but it doesn't work I get favColor is not defined error. thanks in advance.
JS Side
const favColor = "red"
Html side
<script src="pathtojsfile"></script>
<p id="insertHere"></p>
<script>
document.getElementById("insertHere").innerHTML = favColor
</script>
397
asked Oct 21 '25 23:10
It is widely considered bad practice to work with global variables. To avoid it, you can make use of ECMAScript Modules, introduced back in 2015 with ES6/ES2015.
This allows your first Javascript, let's name it colors.module.js to export the variable:
export const favColor = 'red';
Then, in your script that needs to access this variable, you import it:
import { favColor } from '/path/to/js/modules/colors.module.js';
For that to work, you need your importing script to have type=module attribute, and the import must be done on top of your Javascript. The script you import from does not need to be included in the page.
Here's some helpful links to get you started with modules:
I've set up a tiny github repo demonstrating this very basic usage of an ES module.
If modules are not an option, e.g. because you must support IE 11, or your build stack doesn't support modules, here's an alternative pattern that works with a single namespace object you attach to the global object window:
// colors.module.js
window.projectNamespace = window.projectNamespace || {};
projectNamespace.colors = window.projectNamespace.colors || {};
projectNamespace.colors.favColor = 'red';
and in your page you access it from that name space:
document.getElementById("insertHere").innerHTML = window.projectNamespace.colors.favColor;
This way you have a single location to put all your globally accessible variables.
164
As the code is written in your example it should work fine. Just like my example here:
<script>
const favColor = "red";
</script>
<p id="insertHere"></p>
<script>
document.getElementById("insertHere").innerHTML = favColor;
</script>But there can be a number of issues if the code is not like this. But the JavaScript code could just go in the same file. Try to separate the html from the JS like this (the code in the script element could be moved to it's own file):
<html>
<head>
<script>
const favColor = "red";
document.addEventListener('DOMContentLoaded', e => {
document.getElementById("insertHere").innerHTML = favColor;
});
</script>
</head>
<body>
<p id="insertHere"></p>
</body>
</html>Here I'm also adding the eventlistener for DOMContentLoaded, so that I'm sure that the document is loded into the DOM.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
