How to Use JavaScript Variable in HTML src tag

Question

I have a src tag in my HTML which includes a private API key. I didn't want to use the key in the HTML so I made a config.js file so I could reference it from there instead.

<script src="main.js"></script>
<script src="config.js"></script>

var token = '12345'

Later, I have to reference in key in the URL and I tried doing this:

<script async defer
  src=`https://maps.googleapis.com/maps/api/js?key=${token}&callback=initMap`>
 </script>

The URL is underlined red, but shows no error message. I was wondering how I would go about doing this. Thanks!

What's the ultimate purpose? This would be almost the same level of security ("none"). — Dave Newton
– Dave Newton, Commented Dec 17, 2021 at 7:25

CertainPerformance · Accepted Answer · 2021-12-17 01:14:10Z

1

Construct the <script> tag dynamically in JavaScript once you have the token.

const script = document.body.appendChild(document.createElement('script'));
script.src = `https://maps.googleapis.com/maps/api/js?key=${token}&callback=initMap`;

answered Dec 17, 2021 at 1:14

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

2 Comments

mguddeti Over a year ago

If I have two source JavaScript files, how would the HTML know which to use. The purpose of my config file was to just store the token to reference it. Sorry if this is a trivial question, I'm very new to JS

CertainPerformance Over a year ago

Variables you declare on the top level of any non-module file will be available anywhere.

Mythic Lisp · Accepted Answer · 2021-12-17 07:07:51Z

1

Make an html element in javascript and append it to the head Index.html:

<script defer src="scriptTagConfig.js"></script>

scriptTagConfig.js:

//Create element
const apiScriptTag = document.createElement("script")

//Set src attribute
apiScriptTag.setAttribute("src",`https://maps.googleapis.com/maps/api/js?key=${token}&callback=initMap`)

//Append to DOM
document.head.appendChild(apiScriptTag)

answered Dec 17, 2021 at 7:07

Mythic Lisp

111 bronze badge

Collectives™ on Stack Overflow

How to Use JavaScript Variable in HTML src tag

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related