Как я могу использовать переменную из внешнего файла .js в моем HTML?

ProgramBox

Как я могу использовать переменную из внешнего файла .js в моем HTML?

Post author:admin
Запись опубликована:12 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #function #variables

#javascript #HTML #функция #переменные

Вопрос:

У меня есть функция, которую я написал, которая заполняет URL (содержащий изображение) на основе языка браузера. Этот последующий URL затем записывается в переменную. Все изображения основаны на языке, поэтому для Германии это будет «de.gif «, Франция была бы «fr.gif «и так далее.

Мой вопрос в том, как я могу вызвать эту переменную на моей HTML-странице?

Чтобы помочь мне лучше проиллюстрировать эту проблему, вот JavaScript, пожалуйста, обратите внимание, что это ВНЕШНИЙ файл .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 amp;amp; navigator.browserLanguage) || (window.navigator amp;amp; 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="HERE IS WHERE I WANT TO call the variable 'IAB_img'"> 
</div>

Спасибо

РЕДАКТИРОВАТЬ: Итак, я все еще не могу решить эту проблему, есть ли способ использовать значение в «IAB_img» в качестве src изображения в моем HTML-файле?

1. Более подходящий способ предоставления локализованного контента — это проверка HTTP-заголовков на языке Accept. Свойство broser language, которое можно проверить с помощью Javascript, отражает язык, на котором был установлен браузер, а не предпочитаемый пользователем язык.

2. Это правда, я знаю. Но я не могу сделать это на стороне сервера, поэтому меня попросили реализовать это на стороне клиента. Я понимаю, что это «грязный» способ сделать это, но у меня нет выбора

3. Вы можете редактировать также HTML или только JavaScript?

4. Я тоже могу редактировать HTML.

Ответ №1:

Я бы начал с присвоения изображению идентификатора.

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

Затем в вашей функции JavaScript просто назначьте src изображения следующим образом:

 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 amp;amp; navigator.browserLanguage) || (window.navigator amp;amp;   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;
}());}

1. Спасибо @ptfaulkner, но я не думаю, что это достигает того, к чему я стремлюсь. Мне нужно, чтобы src изображения был строкой, которая находится в переменной «IAB_img».

2. Попробуйте поместить URL-адрес-заполнитель в img src в HTML-коде. Возможно, существует ошибка, препятствующая назначению src в JavaScript. Вы также можете попробовать присвоение в одной строке, например: document.getElementById(‘Изображение’).src = IAB_img;

3. Классное спасибо @ptfaulkner. У меня уже есть это в одной строке 🙂 Когда я проверяю firebug, я просто получаю сообщение об ошибке «Не удалось загрузить указанный URL)..

4. Похоже, URL-адрес в переменной IAB_img неверен. Правильно ли это выглядит в firebug?

5. @Kiz Если значение image равно null, то document.getElementById элемент не получен. Вы уверены, что id точно соответствует, и скрипт был запущен только после загрузки DOM? (т.Е. поместите свой скрипт внутри window.onload обработчика событий или поместите <script> элемент в конец <body> )

Ответ №2:

Вы визуализируете HTML-страницу с помощью шаблона? Если да, вы могли бы включить фрагмент javascript с настройкой переменной для дальнейшего чтения:

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

Просто поместите это перед загрузкой вашего другого скрипта, и тогда IAB_img уже будет определен для вас.

Ответ №3:

Что-то вроде этого:

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

1. <script>document.write(«<img src='» IAB_img «‘ />»);</ скрипт>

2. Это совершенно неправильно. Встроенный JavaScript вызывается, только если он находится внутри встроенного обработчика событий (например, onclick ), который src , безусловно, не является

3. Итак, @ Yi Jiang то, что я пытаюсь сделать, достижимо?