CODEWITHSUNDEEP
javascripthtmlfunctionvariables
zik
zik

Reputation: 3095

How can I use a variable from an external .js file in my HTML?

I've got a function that I've written that populates a URL (that contains an image) based on the browser language. This subsequent URL is then written to a variable. All the images are based on language, so for germany it will be "de.gif", France would be "fr.gif" and so on.

My question is how can I call this variable in my HTML page?

To help me to better illustrate this problem here is the JavaScript, please note this is an EXTERNAL .js file called in the of this HTML page:

function IABEU_moused_detect() {
(function IAB_lang_detect() {"use strict";
var IAB_lang_map = {"de-at": "at","nl-be": "be-nl","fr-be": "be-fr","da": "den","de": "de","hu": "hu","en-ie": "ie","ga": "ie","es": "es","fr": "fr","it": "it","nl": "nl","no": "nor","pl": "pl","en": "uk","en-GB": "uk","en-US": "uk","en-gb": "uk","en-us": "uk"},
IAB_lang = (navigator && navigator.browserLanguage) || (window.navigator && window.navigator.language) || "en-GB";
IAB_url = ("http://www.someurl.com/" + IAB_lang_map[IAB_lang]);
IAB_img = ("http://www.myimagesarehere.com/" + IAB_lang_map[IAB_lang]+".gif");
}());}

So it's the IAB_img variable that I want to call in my HTML page (it's a global variable in the .js file)

The HTML is here:

<div>
  <img src="HERE IS WHERE I WANT TO call the variable 'IAB_img'"> 
</div>

Thanks

EDIT: So I still can't solve this, is there a way for me to use the value in "IAB_img" as the image src in my HTML file?

Upvotes: 2

Views: 2315

Answers (3)

Karl Rosaen
Karl Rosaen

Reputation: 4644

Are you rendering the html page via a template? If so, you could include a javascript snippet with a variable setup to be read further on:

<script type="text/javascript">
  var IAB_img = {{value}};
</script>

Just put this before you load your other script, and then the IAB_img will already be defined for you.

Upvotes: 0

NitWit
NitWit

Reputation: 1

Something like this:

<div>
 <img src="javascript:document.write(IAB_img);" />
</div>

Upvotes: -1

ptfaulkner
ptfaulkner

Reputation: 712

I would start by giving the image an id.

<div>
    <img id="TheImage" src="HERE IS WHERE I WANT TO call the variable 'IAB_img'"> 
</div>

Then in your JavaScript function, just assign the src of the image like so:

function IABEU_moused_detect() {
    (function IAB_lang_detect() {"use strict";
        var IAB_lang_map = {"de-at": "at","nl-be": "be-nl","fr-be": "be-fr","da": "den","de": "de","hu": "hu","en-ie": "ie","ga": "ie","es": "es","fr": "fr","it": "it","nl": "nl","no": "nor","pl": "pl","en": "uk","en-GB": "uk","en-US": "uk","en-gb": "uk","en-us": "uk"},
        IAB_lang = (navigator && navigator.browserLanguage) || (window.navigator &&   window.navigator.language) || "en-GB";
        IAB_url = ("http://www.someurl.com/" + IAB_lang_map[IAB_lang]);
        IAB_img = ("http://www.myimagesarehere.com/" + IAB_lang_map[IAB_lang]+".gif");
        var image = document.getElementById('TheImage');
        image.src = IAB_img;
}());}

Upvotes: 2

Related Questions