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

Question

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?

The more appropriate way of serving localized content is by inspecting the Accept-Language HTTP headers. The broser language property that can be inspected via Javascript reflects the language the browser was installed in, not the user's preferred language. — hugomg
– hugomg, Commented Nov 8, 2011 at 12:55
This is true I know. But I can't do this server side so I have been asked to implement it client side. I realise this is a "dirty" way of doing it but I don't have a choice — zik
– zik, Commented Nov 8, 2011 at 12:59

ptfaulkner · Accepted Answer · 2011-11-08 13:21:33Z

2

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

answered Nov 8, 2011 at 13:21

ptfaulkner

7124 silver badges14 bronze badges

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

11 Comments

zik Over a year ago

Thanks @ptfaulkner but I don't think this achieves that I am after. I need the src of the image to be the string that is located in the variable "IAB_img".

ptfaulkner Over a year ago

Try putting a placeholder url in the img src in the HTML code. Maybe there is an error preventing the assignment of the src in JavaScript. You may also want to try the assignment in one line like: document.getElementById('TheImage').src = IAB_img;

zik Over a year ago

Cool thanks @ptfaulkner. I've already got it on one line :) When I check in firebug I just get the error "Failed to load given URL)..

ptfaulkner Over a year ago

That sounds like the url in the IAB_img variable isn't correct. Does it look correct in firebug?

Yi Jiang Over a year ago

@Kiz If the value of image is null, then document.getElementById is not getting the element. Are you sure the id matches exactly, and is the script been run only after the DOM is loaded? (ie. place your script inside an window.onload event handler or place the <script> element at the end of <body>)

|

Karl Rosaen · Accepted Answer · 2011-11-09 11:08:29Z

0

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.

answered Nov 9, 2011 at 11:08

Karl Rosaen

4,6322 gold badges31 silver badges31 bronze badges

1 Comment

zik Over a year ago

Thanks - but it's not done via a template. The answer above solved it (after lots of deliberation by me) but thanks all the same

Yi Jiang · Accepted Answer · 2011-11-08 15:44:28Z

-1

Something like this:

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

edited Nov 8, 2011 at 15:44

Yi Jiang

50.2k16 gold badges139 silver badges137 bronze badges

answered Nov 8, 2011 at 12:54

NitWit

1

3 Comments

NitWit Over a year ago

Yi Jiang Over a year ago

This is entirely wrong. Inline JavaScript is only called if it is inside an inline event handler (like onclick), which src most certainly is not

zik Over a year ago

So @Yi Jiang is what I am trying to do achievable?

Collectives™ on Stack Overflow

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

3 Answers 3

11 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related