外部文件中的函数未定义 [JS]

Question

Hello I have a problem with JavaScript function.
I have 3 external JS files that are included to my JS file like that:

var badgeJs = document.createElement('script');
badgeJs.type = 'text/javascript';
badgeJs.src = 'url'
document.head.appendChild(badgeJs);

So here is the problem I need to use 3 functions, but sometimes I received error Refference error: functionName is not defined , after that I refresh the page and first function works but second one no, and every time on refresh some of functions are not defined.
I don't know what is the problem and why this happen? Any advice will be appreciate.
I don't know if this is gonna help but JS code is for a shopify-app

How I call functions

var content = 'function1(param);function2(param1, param2, param3, [10, 25]);function3(param1, param2);';
(function() { var script = document.createElement('script'); script.text = content; var body = document.querySelector('body'); body.append(script);})();

Answer 1

Your file inclusions run at the sime time you're trying to call your functions. As the file inclusion need time to load your files, you are calling the functions before they have been loaded. You have to manually add your scripts to the HTML:

<script type="text/javascript" src="/to/your/file.js">

And then run your function when the DOM has been loaded:

document.addEventListener("DOMContentLoaded", function(event) {
    // Your code to run since DOM is loaded and ready
});

If you can't change the HTML, then include your files dynamically and make sure to call your functions when the files are loaded.