How can I use a variable in the src of a script tag?

Question

I want to use a variable sym to change how a script loads on the page. I can load the script if I hard code the src URL, but I can't use JavaScript to build the URL within the src attribute of the script tag.

<script> var sym = "MSFT"; document.write(sym); </script> <script src="http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=$SPX+MSFT&Output=JS"></script> <!-- works --> <script src="http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=$SPX+"+sym+"&Output=JS"></script> <!--- does NOT work because I do not know how to insert the var correctly -->

Thank you Jason for so clearly editing my question, it now describes the problem correctly and fortunately the problem was solved elegantly by Maxim and CertainPerformance. — TonyT
– TonyT, Commented Apr 15, 2018 at 6:35

Maxim Khanov · Accepted Answer · 2018-04-14 05:48:48Z

How do you pass a variable as a part of an URL?

Easy! Since you don't mind using javascript a simple solution is as follows

var scriptElement = document.createElement("script"); scriptElement.src = "http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=" + encodeURIComponent("$SPX+" + sym) + "&Output=JS"; document.head.appendChild(scriptElement);

This code creates an script element with the source being "http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=" + encodeURIComponent("$SPX+" + sym) + "&Output=JS". Then it appends it to the head of the webpage.

The final HTML being:

<script> var sym = "MSFT"; document.write("\<script src='" + "http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=" + encodeURIComponent("$SPX+" + sym) + "&Output=JS" + "'\>\</script\>"); </script>

The reason that this solution won't work is as follows:

Codepen is an HTTPS site which means it WILL NOT serve HTTP content. To be honest I have no idea why Codepen serves the HTTP script. How to fix this? Well, there really is only one easy solution:

Instead of using Codepen use a local HTML file and just open that, if you have your own HTTP server you can use that.

Quick how-to guide:

1) Open a text editor

2) Type the following

<html> <head> <script> var sym = "MSFT"; document.write("\<script src='" + "http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=" + encodeURIComponent("$SPX+" + sym) + "&Output=JS" + "'\>\</script\>"); </script> </head> <body> </body> </html>

3) Now hit the "Save As" button and save it as a .html file

4) Open it!

5) Have fun :)

Thank you, that points me to the right direction "part of URL" and I will study it as I have similar problems in other apps. I pasted the tag ino codepen.io and I have to study it better, as it only resulted in a blank yet.
yes, I see <script>document.write(scriptElement.src); </script> shows the complete URL nicely, but how would codepen.io show the graph now? <script src=scriptElement.src></script> instead of my 2nd script line in the question still produces no graph.
Can I see the codepen? It would really help! In the meantime, I will try to see what the problem is.
This encodeURIComponent works exactly the way I want it to. Thank you sooo much!!! I spent many hours and days unsuccessfully trying in the past. Actually I use the local html file method, not codepen and my apps are more complex, but I illustrated the problem in that simplified way and thought codepen is easily accessible to all to try. htmledit.squarefree.com is neat too to try,

CertainPerformance · Accepted Answer · 2018-04-14 01:07:05Z

You can't use Javascript variables inside of HTML markup like that - you'll have to create the script tag yourself fully in Javascript alone. For example:

<script> var sym = "MSFT"; document.addEventListener('DOMContentLoaded', () => { document.head.appendChild(document.createElement('script')) .src = `http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=$SPX${sym}&Output=JS`; }); </script>

Thank you for pointing me in the right direction and giving me the reason my crude attempt was no good. (I knew it would be more involved but did not know what to search for).

Collectives™ on Stack Overflow

How can I use a variable in the src of a script tag?

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related