如何在HTML中使用外部.js文件中的变量？ [英] How can I use a variable from an external .js file in my HTML?

问题描述

我有一个我写的函数，它基于浏览器语言填充一个URL（包含一个图像）。随后的这个URL被写入一个变量。所有的图片都是基于语言的，所以对于德国来说，它会是de.gif，法国会是fr.gif等等。

我的问题是我怎么能在我的HTML页面中调用这个变量？

为了帮助我更好地说明这个问题，请注意JavaScript是一个EXTERNAL .js文件这个HTML页面：

  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）; 
 $（））;} 
  

所以我想调用IAB_img变量我的HTML页面（它是.js文件中的全局变量）

HTML在这里：

 < DIV> 
< img src =这里是我想要调用变量'IAB_img'> 
< / div> 
  

谢谢

编辑：无法解决这个问题，有没有办法让我在我的HTML文件中使用IAB_img中的值作为图像src？

解决方案

 < div> 
 < / div> 
  

然后在你的JavaScript函数中，像这样分配图像的src：

 函数IABEU_moused_detect（）{
（function IAB_lang_detect（）{use strict; 
 var IAB_lang_map = { at，nl-be：be-nl，fr-be：be-fr，da：den，de ：hu，en-ie：ie，ga：ie，es：es，fr：fr，it ：nl，no：nor，pl：pl，en：uk，en-GB：uk，en-US en-gb：uk，en-us：uk}，
 IAB_lang =（navigator& navigator.browserLanguage）||（window.navigator&& window.navigator。语言）||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; 
}（） ）;} 
  

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?

解决方案

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

这篇关于如何在HTML中使用外部.js文件中的变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！