How to add script src dynamically with getElementById?

Question

Go easy on me - I don't spend a lot of time in javascript. :D

I am trying to write a script that will build a JS call based on a URL query, but cannot get the script src to update.

For example, if someone visits https://example.com/page?aid=ABC123, I want to create a script call that would function akin to: <script type='text/javascript' src='https://example.com/script.js?aid=ABC123'></script> But I need that call to be dynamically built based on the "aid" variable in the URL.

My "page" code looks like this:

<script type='text/javascript' src='' id='hwContent'></script>
<script type='text/javascript'>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const artid = urlParams.get('aid');
var url = "https://example.com/js.php?aid=";
document.getElementById('hwContent').src = url + artid;
</script>

For the moment while I'm testing, the "script.js" code is just a basic "success!" message using document.write - I haven't even gotten to seeing if the "aid" makes it through to the script file.

If I go direct to the script URL, it works. If I hard code the script URL into the script src field, it works. But as soon as I leave the src field empty and rely on getElementById to insert the url into the src field, nothing happens - the area that should display the "success!" message is just blank. Chrome inspector shows no JS errors.

Instead of changing the src of an existing script tag, try creating a new one with document.createElement("script"), setting its src, and appending it to the DOM. — Barmar
– Barmar, Commented Oct 21, 2024 at 20:42
I tried that direction too based on stackoverflow.com/questions/21371737/…: That gives me a JS error: Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild') — crakrman
– crakrman, Commented Oct 21, 2024 at 21:07
Just use document.head.appendChild(script) there's no need to search for it by tag name. — Barmar
– Barmar, Commented Oct 21, 2024 at 21:12
Interesting... that worked much better than the method in the other question I used. I wonder what the difference is; might have to play with it to find out. Much appreciated! — crakrman
– crakrman, Commented Oct 22, 2024 at 17:34
It might depend on where in the HTML your script code is located. If it's in the <head> then document.getElementsByTagName('head') won't work because the head hasn't been parsed fully yet. — Barmar
– Barmar, Commented Oct 22, 2024 at 18:33

Lajos Arpad · Accepted Answer · 2024-10-21 21:31:05Z

1

Get artid like you did, create a script tag and add it to document.head:

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const artid = urlParams.get('aid');
var url = "https://example.com/js.php?aid=";
var s = document.createElement( 'script' );
s.setAttribute( 'src', url + artid );
 document.head.appendChild( s );

answered Oct 21, 2024 at 21:31

Lajos Arpad

80.4k42 gold badges123 silver badges235 bronze badges

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

2 Comments

crakrman Over a year ago

That did the trick! Thanks so much for the code!

crakrman Over a year ago

Side note: I also had to add s.setAttribute('type', 'text/javascript'); to get the data past the CORB blocker.

Collectives™ on Stack Overflow

How to add script src dynamically with getElementById?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related