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?

回答1:

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;
}());}

回答2:

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.

回答3:

Something like this:

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

来源：https://stackoverflow.com/questions/8050573/how-can-i-use-a-variable-from-an-external-js-file-in-my-html

标签

javascript

html

function

variables