Template literal not resolving as expected
I have a directory structure C: Gustafson Website ⋮ scripts global.js ⋮ ⋮ TestDirector… (read more)
I have a directory structure
C:
Gustafson
Website
⋮
scripts
global.js
⋮
⋮
TestDirectory
baseUrl_test.html
⋮
In the <head> of a webpage, I determine a baseUrl for the page using the following:
<script>
// assumes website topmost directory is "Website""
( async ( ) => {
const segments = document.documentURI.split ( "/");
const index = segments.findIndex ( element =>
element == "Website" );
if ( index < 0 )
{
throw new TypeError (
"Website structure not constructed correctly" );
}
segments.length = index + 1;
let path = segments.join ( "/" );
path += "/";
window.baseUrl = path;
console.log(`${baseUrl}`);
} ) ( );
</script>
The console log displays
file:///C:/Gustafson/Website/
In the body is
<script>
console.log ( `${baseUrl}scripts/global.js` );
</script>
<script src=`${baseUrl}scripts/global.js`></script>
<script>
window.onload =
function ( )
{
Global.initialize_globals ( );
};
</script>
The console log displays
file:///C:/Gustafson/Website/scripts/global.js Loading failed for the <script> with source “file:///C:/Gustafson/Website/TestDirectory/%60$%7BbaseUrl%7Dscripts/global.js%60”. Uncaught ReferenceError: Global is not defined
onload file:///C:/Gustafson/Website/TestDirectory/baseUrl_test.html:37 EventHandlerNonNull* file:///C:/Gustafson/Website/TestDirectory/baseUrl_test.html:34
The problem is the console.log displays what is expected but the src= is using something totally different.