title: How to change the source of a <script> element in JavaScript?
body: <p>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:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>And the code of the script:</p>
  
  <pre><code>&lt;script id="level" src=""&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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.   </p>
  
  <p>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:</p>
  
  <pre><code>&lt;script id="level" src="levels/level0.js"&gt;&lt;/script&gt;
  </code></pre>