How do I load the functions of a JavaScript File called through a JavaScript Object

Question

I have a local JS file that needs to be called using a script object. However, I am not able to get the functions to run. Here's the code snippet.

<script type="text/javascript">
 var x = document.createElement("SCRIPT");
 x.type = "text/javascript";
 x.src = "file:///C:/scripts/localscript.js";
 //one of the functions is loadData();
 loadData(); //I'm getting reference error, loadData is not defined.
</script>

Thank you,

Answer 1

You need to create a script element and insert it in DOM (mostly under head) to load the script. When that script is loaded by the browser, whatever you return from that script will be available.

Consider sampleScript.js with below code

(function(window){
 'use strict';
 window.app = {
 sayHi: function() {
 console.log('Hey there !');
 }
 };
})(this);

To load this script, I do

<script>
 var node = document.createElement('script');
 node.src = 'sampleScript.js';
 node.addEventListener('load', onScriptLoad, false);
 node.async = true;
 document.head.appendChild(node);
 function onScriptLoad(evt) {
 console.log('Script loaded.');
 console.log('app.sayHi ---> ');
 app && app.sayHi();
 }
</script>

Taking cues, you can fit to your need. Hope this helps.

Answer 2

Use the onload event:

x.onload = function() { window.loadData(); }