How to change the source of a <script> element in JavaScript?

Question

I am trying to change the src attribute of a script in the head of the page positioned below the main script. Here is a part of the code:

function loadLevel(l) {
    switch (l) {
        case 0:
            document.getElementById("level").src = "levels/level0.js";
            level0.load();
            break;
        case 1:
            document.getElementById("level").src = "levels/level1.js";
            level1.load();
            break;
    }
    level = l;
}

And the code of the script:

<script id="level" src=""></script>

When the function loadLevel(l) is called the switch checks the value of l, changes the value of the source of the script called "level" accordingly and calls the right loading function. The objects level0 and level1 and their load functions are stored respectively in the files level0.js and level1.js.

But when I do this, it won't work. level0.js and level1.js have no mistakes in them because when I do this it does load level 0, but obviously not level 1 when I press the button to do so:

<script id="level" src="levels/level0.js"></script>

This looks a lot like an XY problem. You'll never get it working, whatever you're trying to do, using this method. It is unclear why you have to have an "empty" script tag there in the first place -- can't you just create a new one? — JJJ
– JJJ, Commented Jul 17, 2015 at 10:12
"...positioned below the main script" It sounds like the element doesn't exist yet, but @Juhana's right, there's bound to be a better way to solve this problem. Note that there's little to no point in changing the src on an existing script element. It doesn't remove the old script from the page, for instance. To load another script, just append a new script element. — T.J. Crowder
– T.J. Crowder, Commented Jul 17, 2015 at 10:14

atmd · Accepted Answer · 2015-07-17 10:21:43Z

2

When you load a new script the process is async, so calling the function stright after wont work as the script wont have loaded, you'd need a call back once complete.

function loadLevel(level) {

  (function(d, script) {
      script = d.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.onload = function(){

        /*
          Your script has loaded
          You can now call the code you have loaded
         */

      };
    script.src = '/levels/level' + level + '.js';
    d.getElementsByTagName('head')[0].appendChild(script);
  }(document));

}

edited Jul 17, 2015 at 10:21

answered Jul 17, 2015 at 10:14

atmd

7,5003 gold badges35 silver badges64 bronze badges

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

Comments

srajan0149 · Accepted Answer · 2020-11-14 12:46:47Z

0

I refer you to use modules instead of using regular scripts. Here is the code you can use:

async function loadLevel(l){
let {load}= await import("/levels/level"+l+".js");
load();
}

And in your level scripts:

function load(){
//Your code
}
export {load};

And some references for modules:https://javascript.info/modules-intro, https://javascript.info/import-export, https://javascript.info/modules-dynamic-imports And here is my example code on Github: https://github.com/Learndev-student/Example/tree/main/Example%20001 And see it running on web: https://learndev-student.github.io/Example/Example%20001/index.html

edited Nov 14, 2020 at 12:46

answered Nov 14, 2020 at 12:15

srajan0149

436 bronze badges

Collectives™ on Stack Overflow

How to change the source of a <script> element in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related