Function not working if src is a variable?

Question

With this HTML the function myFunc() can be executed. https://myurl.de/myjs.js has the function myFunc in it.

<head>
 <script type="text/javascript" src="https://myurl.de/myjs.js"></script>
 <body>
  <script type="text/javascript">
   myFunc();
  </script>
 </body>
</head>

But with the second HTML I get an Error: Uncaught ReferenceError: myFunc is not defined.

https://myurl.de/settingsFile.js is a file that includes this url in a var: https://myurl.de/myjs.js so basically SettingsFile.UrlToMyJS is this https://myurl.de/myjs.js

<head>
 <script src="https://myurl.de/settingsFile.js"></script>
 <script type="text/javascript" id="myid"></script>
</head>
 <body>
  <script type="text/javascript">
   document.getElementById('myid').src = SettingsFile.UrlToMyJS;
   myFunc();
  </script>
 </body>

When I console.log(document.getElementById('myid')) this is the output:

<script type="text/javascript" id="myid" src="https://myurl.de/myjs.js></script> which is correct. It looks exactly like the script in the head of the first html (with the difference that it has the id="myid").

Yet it does not work. Why and how can I fix it?

settingsFile.js:

var defaultURL = 'https://myurl.de/';
var SettingsFile = {
UrlToMyJS : defaultURL + 'myjs.js',
}

Look at your body in a mirror : the head is above it, not around :) — Jeremy Thille
– Jeremy Thille, Commented Nov 13, 2019 at 15:16
Could you please post the actual content of settingsFile.js instead of describing it? — Jeremy Thille
– Jeremy Thille, Commented Nov 13, 2019 at 15:20
@T.J.Crowder oh you right, sorry. These mistakes only exist in my thread. The real files don't have those small mistakes. I corrected them. — axbeit
– axbeit, Commented Nov 13, 2019 at 15:25
@JeremyThille Hi, I just edited my thread and added the settingsFile.js — axbeit
– axbeit, Commented Nov 13, 2019 at 15:29

T.J. Crowder · Accepted Answer · 2019-11-13 15:40:59Z

The reason it's not working is that you can't add a src to a script element that's already in the DOM — or rather, doing so doesn't do anything. The script element has already been processed.

Instead, create it and then append it:

var script = document.createElement("script");
script.onload = function() {
    myFunc();
};
script.src = SettingsFile.UrlToMyJS;
document.head.appendChild(script);
// If you need to support IE8, use the following instead of the previous line:
//document.getElementsByTagName("head")[0].appendChild(script);

That waits for the script to load, then calls myFunc (which should exist by then).

Also note that as I and Jeremy pointed out in the comments, body doesn't go in head, it goes after. It's also generally best to put script tags at the end of body (if you're not using async or defer attributes on them or type="module"). So in all, something like:

<head>
    <!-- head stuff here -->
</head>
<body>
    <!-- content here -->
    <script src="https://myurl.de/settingsFile.js"></script>
    <script type="text/javascript">
    var script = document.createElement("script");
    script.onload = function() {
        myFunc();
    };
    script.src = SettingsFile.UrlToMyJS;
    document.head.appendChild(script);
    // If you need to support IE8, use the following instead of the previous line:
    //document.getElementsByTagName("head")[0].appendChild(script);
    </script>
</body>

Another option is to use document.write. This sort of thing may be the last at-least-partially appropriate use of document.write during the main parsing of the page:

<head>
    <!-- head stuff here -->
</head>
<body>
    <!-- content here -->
    <script src="https://myurl.de/settingsFile.js"></script>
    <script type="text/javascript">
    document.write('<script src="' + SettingsFile.UrlToMyJS + '"><\/script>');
    </script>
    <script>
    myFunc();
    </script>
</body>

Karan Gandhi · Accepted Answer · 2019-11-13 15:21:19Z

1

You can try creating a element and then appending it to your title

For Example (script code) :

var script = document.createElement("script");
script.src = "YOUR_SCRIPT_SRC_HERE";
document.getElementsByTagName('head')[0].appendChild(script);

Here I am creating a new tag in html and then appending it to the head of your html. Even as T.J. Crowder mentioned in the comment try removing your body from the head

edited Nov 13, 2019 at 15:21

answered Nov 13, 2019 at 15:17

Karan Gandhi

3331 gold badge4 silver badges18 bronze badges

2 Comments

T.J. Crowder Over a year ago

Actually, contrary to my deleted comment, there is an append now: developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

T.J. Crowder Over a year ago

Note that if the OP just puts the call to myFunc(); immediately after the above, it won't work -- you have to wait for the script to load.

Collectives™ on Stack Overflow

Function not working if src is a variable?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related