Cannot change html script src with external javascript

Question

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:

document.write(`This is content script a`);

So I have the following setup, an html file with two links that call the changeSrc function, which SHOULD change the source:

<!DOCTYPE html>
<html>
 <body>
  <a id="aLink" href="#" onclick="changeSrc('a');return false;">Change to a</a/><br>
  <a id="aLink" href="#" onclick="changeSrc('b');return false;">Change to b</a/><br>
  <script id="contentScript" src="a.js"></script>
 </body>
</html>

The JS file:

function changeSrc (arg) {
    document.getElementById("contentScript").innerHTML = '';
    if (arg == "a") {
        document.getElementById("contentScript").innerHTML = '<script id="contentScript" src="a.js"></script>';
    } else if (arg == "b") { {
        document.getElementById("contentScript").innerHTML = '<script id="contentScript" src="b.js"></script>';
    }

}

Why is the script source not changing on the link click?!

Thank you for your time, I feel like an absolute idiot...

Not 100% sure what's going on... are you trying to write to an iframe? — sg.cc, Dec 24 '15 at 01:09
do you get any errors in your browser developer console? p.s. avoid `document.write` unless it's what you really **need** to do (like working with iframes) — Jaromanda X, Dec 24 '15 at 01:09
That first bit of code won't work unless you have a browser that supports ES6 template strings. Check your quote marks. Also, you are trying to set the `innerHTML` of a script tag which would not do what you want even if it were possible. — Alexander O'Mara, Dec 24 '15 at 01:10
Possible duplicate of [javascript in innerhtml not working](http://stackoverflow.com/questions/15417839/javascript-in-innerhtml-not-working) — Alexander O'Mara, Dec 24 '15 at 01:13
You cannot reuse - more than once - a script tag by modifying it's "src" attribute. — Roko C. Buljan, Dec 24 '15 at 02:41

Calder White · Accepted Answer · 2015-12-24T15:43:11.797

1

Try

document.getElementById("ContentScript").src = your_script_source_here

Hope this helps!

edited Dec 24 '15 at 15:43

answered Dec 24 '15 at 06:03

Calder White

1,287
9
21

Roko C. Buljan · Answer 2 · 2019-11-08T16:55:36.480

You cannot use duplicate ID aLink aLink. You know what's an ID.
Don't use inline JS. Keep business logic away from the (View) template.
Use a scripting way to assign your listeners to elements. Take a look at addEventListener
</a/> should be </a>
#contentScript is a <script> tag. Why are you using innerHTML = "" on it? Script execution is not in the scope of literal HTML.
You can store the desired "src" into the anchor data-* attribute
Since one can only change the "src" of a <script> tag once...
you should create a brand new <script> Element on the fly:

<a id="aLink" data-src="http://jsbin.com/taqadu/1/js" href="#">Change to a</a><br>
<a id="bLink" data-src="http://jsbin.com/dizavo/1/js" href="#">Change to b</a>

<script>
function id(v){return document.getElementById(v);} // Helper

function changeSrc(event){
  
  event.preventDefault(); // instead of `return false;`
  // Get already existent one
  var contentScript = id("contentScript");
  // if exists, remove it
  if(!!contentScript) contentScript.parentNode.removeChild(contentScript);
  // Create a new one
  contentScript = document.createElement("script");
  // Assign ID
  contentScript.id = "contentScript";
  // Assign "src" from the anchor's data-* attribute
  contentScript.src = this.dataset.src;
  // Finally add the newly generated `script` to body
  document.body.appendChild( contentScript );
}


id("aLink").addEventListener("click", changeSrc);
id("bLink").addEventListener("click", changeSrc);
</script>

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
https://developer.mozilla.org/en/docs/Web/API/Node/appendChild
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

Cannot change html script src with external javascript

2 Answers2