Javascript trouble in dynamically call another class in other js file

Question

I'm trying to make a javascript function to call another .js file like this:

scriptCaller.js

function callScript(file){
   var script = document.createElement('script');
   script.id = file;
   script.type = 'text/javascript';
   script.async = true;
   script.src = "script/"+file+".js";
   document.getElementById('scriptSection').appendChild(script);
}

Then I create some class to be called by that script in other file:

divGenerator.js

function divGenerator(){
   var self = this;
   var div = document.createElement('div');

   this.tag = function(){
       return div;
   }

   /*and some other function to style the div*/

}

Then i make the main file to be executed:

main.js

function build(){
   callScript('divGenerator');
}

function main(){
   var test = new divGenerator();

   /*execute some function to style the div*/

   document.getElementById('htmlSection').appendChild(script);
}

All the three file will be called in a HTML files that will execute the main function:

myPage.html

<html>
   <head>
      <title>myPage</title>
   </head>
   <script src="scriptCaller.js"></script>
   <script src="main.js"></script>
   <body>
      <div id="htmlSection"></div>
      <div id="scriptSection"></div>
   </body>
</html>
<script>build();</script>
<script>main();</script>

If I correct it should display the styled div, but what I got is an error that said:

TypeError: divGenerator is not a constructor[Learn More]

But, when I move the divGenerator() class to myPage.html it works fine. Any idea to solve this problem?

From your browser's console, can you share which line is throwing this error? TypeError: Container is not a constructor[Learn More] — gurvinder372
– gurvinder372, Commented Sep 25, 2017 at 9:40
@gurvinder372 it says in main.js:10:13. the line that declare var test = new divGenerator(); — user2265229
– user2265229, Commented Sep 25, 2017 at 9:47
You need to drill that error description further.. I can't see Container in your code.. For reference developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — gurvinder372
– gurvinder372, Commented Sep 25, 2017 at 9:53

codejockie · Accepted Answer · 2017-09-25 09:39:22Z

1

You need to add scriptCaller.js and divGenerator.js to your html script element.

<html>
   <head>
      <title>myPage</title>
   </head>
   <script src="scriptCaller.js"></script>
   <script src="main.js"></script>
   <script src="scriptCaller.js"></script>
   <script src="divGenerator.js"></script>
   <body>
      <div id="htmlSection"></div>
      <div id="scriptSection"></div>
   </body>
</html>
<script>build();</script>
<script>main();</script>

answered Sep 25, 2017 at 9:39

codejockie

11.1k5 gold badges52 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dfsq Over a year ago

You didn't understand the question.

dfsq · Accepted Answer · 2017-09-25 09:56:26Z

0

You have couple of problems in your code. First of all, do not assign id to script element same as the "exported" global constructor name. You need to remember that anything with id attribute (and name) automatically gets exposed as global variable on window object. It means that divGenerator in your case is going to be reference to HTMLScriptElement, not a constructor function.

Second problem is related to timing, since you are loading script with async attribute. This is good, but you need to realise that in this case you can't expect that script will be loaded when you call main after build(). I would suggest to wrap script creation into promise:

function callScript(file){
   return new Promise(function(resolve) {
       var script = document.createElement('script');
       script.id = 'script-' + file; // Note different id
       script.async = true;
       script.src = "script/" + file + ".js";
       script.onload = resolve

       document.getElementById('scriptSection').appendChild(script);
   })
}

and use it like this:

<script>
  build().then(function() {
    main();
  })
</script>

answered Sep 25, 2017 at 9:56

dfsq

193k26 gold badges244 silver badges261 bronze badges

3 Comments

user2265229 Over a year ago

Aww.. a new error comes up. it says TypeError: build(...) is undefined[Learn More].

dfsq Over a year ago

You still need to include <script src="main.js"></script> where build is defined.

user2265229 Over a year ago

it works fine after i change the build() function with callScript('divGenerator'). Thank you..

Collectives™ on Stack Overflow

Javascript trouble in dynamically call another class in other js file

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related