title: Cannot change html script src with external javascript
body: <p>I have read every single google result I could find, and this still is not working... all i'm trying to do is change a script source depending on a link that is clicked. The source files will have one or two lines returned by document.write, like so:</p>
  
  <pre><code>document.write(`This is content script a`);
  </code></pre>
  
  <p>So I have the following setup, an html file with two links that call the changeSrc function, which SHOULD change the source:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;body&gt;
    &lt;a id="aLink" href="#" onclick="changeSrc('a');return false;"&gt;Change to a&lt;/a/&gt;&lt;br&gt;
    &lt;a id="aLink" href="#" onclick="changeSrc('b');return false;"&gt;Change to b&lt;/a/&gt;&lt;br&gt;
    &lt;script id="contentScript" src="a.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The JS file:</p>
  
  <pre><code>function changeSrc (arg) {
      document.getElementById("contentScript").innerHTML = '';
      if (arg == "a") {
          document.getElementById("contentScript").innerHTML = '&lt;script id="contentScript" src="a.js"&gt;&lt;/script&gt;';
      } else if (arg == "b") { {
          document.getElementById("contentScript").innerHTML = '&lt;script id="contentScript" src="b.js"&gt;&lt;/script&gt;';
      }
  </code></pre>
  
  <p>}</p>
  
  <p>Why is the script source not changing on the link click?!</p>
  
  <p>Thank you for your time, I feel like an absolute idiot...</p>