Как передать переменную из html в javascript
Перейти к содержимому

Как передать переменную из html в javascript

  • автор:

Developing.ru

Как передать значение из html в скрипт и использовать его там?

makeMenu(‘sub2′,’ArchiCAD’,‘archicad.html’,’info’)

Нужно, чтобы вместо «archicad.html» стояла переменная, значение которой передается из html.

Absurd Сообщения: 1213 Зарегистрирован: 26 фев 2004, 13:24 Откуда: Pietari, Venäjä Контактная информация:

Откуда вызывается makeMenu? По какому-то событию?
2B OR NOT(2B) = FF
AiK Сообщения: 2271 Зарегистрирован: 13 фев 2004, 18:14 Откуда: СПб Контактная информация:
Corite, вообще-то в HTML нет переменных.
Даже самый дурацкий замысел можно воплотить мастерски
Максим Сообщения: 4 Зарегистрирован: 09 авг 2004, 21:54 Откуда: Москва Контактная информация:

Как уже сказали, в html нет переменных — это правда. Может быть ты имел в виду нечто другое, но не так выразился? Объясни по точнее, что именно требуется.

makeMenu — это функция Java Script или PHP? Или еще чего-то?

Если Java Script, то вариант такой:
каждому (ну или почти каждому) элементу HTML соответствует объект JavaScript с аналогичным именем, а его параметры будут параметрами этого объекта. Тогда тебе нужно вставить вместо archicad.html сценарий JS и обратиться к свойству нужного объекта. Например у HTML тега есть параметр src. Чтобы к нему обратиться из сценария — window.document.здесь имя картинки.src

Если тебе нужно чтобы вместо archicad.html было имя текущего документа — всесто archicad.html всавь сценарий с одной единственной строкой — document.location

Можно реализовать на PHP — ломает писать, там еще проще, только чуть больше кода, но я не уверен что ты спрашиваешь именно это, по этому, объясни по точнее, что нужно — постараюсь тебе помочь.

Облегчать жизнь юзерам и тем самым усложнять ее себе — есть святой долг каждого программера
Corite Сообщения: 32 Зарегистрирован: 29 июл 2004, 13:46

В общем передо мной стоит такая задача — запускается страница, в которой есть ссылка на скрипт этот скрипт в отдельном файле и вызывается

Необходимо чтобы в menus.js передавалось имя запущенойстраницы в формате имя_страницы.html В С++ это делалось с помощью либо глобальных переменных либо передавались параметры. А здесь как?

Corite Сообщения: 32 Зарегистрирован: 29 июл 2004, 13:46

Попробовал заменить makeMenu(‘sub2′,’ArchiCAD’,’archicad.html’,’info’) на makeMenu(‘sub2′,’ArchiCAD’,document.location,’info’) — не получилось.
makeMenu — запускается несколько раз (с разными параметрами) в файле menus.js для создания соответствующих пунктов меню

Максим Сообщения: 4 Зарегистрирован: 09 авг 2004, 21:54 Откуда: Москва Контактная информация:

А, теперь все понятно.
Ты немного не правильно ставишь перед собой задачу: передавать в скрипт ничего не надо. Скрипт (menus.js) подгружается в документ и оперирует со всеми переменными и объектами документа, в который он подгружен.

Т.е., чтобы получить имя текущей страницы тебе нужно будет в скрипте вырезать имя этой страницы из текущего URL документа. Проще говоря, обратись к свойству location объекта document (document.location), а дальше вырезай оттуда имя страницы.

Облегчать жизнь юзерам и тем самым усложнять ее себе — есть святой долг каждого программера
Corite Сообщения: 32 Зарегистрирован: 29 июл 2004, 13:46

Все дело в том, что я мало работал с явой. Можешь кусок кода привести и куда его потом вставить написать?

Corite Сообщения: 32 Зарегистрирован: 29 июл 2004, 13:46
Как из document.location вырезать имя страницы — оно в конце идет?
Максим Сообщения: 4 Зарегистрирован: 09 авг 2004, 21:54 Откуда: Москва Контактная информация:

Вот, даю тебе код и пояснения к нему:

var x = window.location.href;
var y = new Array;
var z;
y = x.split(«/»);
z = y[y.length-1];
document.writeln(z);

Вставляй его в любом месте документа или в файле скрипта.
Итак, пояснения:
Всего для этой цели нам понадобится 2 переменных и 1 массив.
Переменная x — это текущее содержжимое командной строки броузера.
Переменная z — будет содержать искомые данные, т.е. имя документа. С этой-то переменной дальше и будешь оперировать.
Массив y — пустой массив.
Т.к. путь к файлу в командной строке пишется через символ «/» (например http://www.123.com/document.htp), то мы разобьем содержимое командной строки, хранящееся в переменной х, на несколько подстрок, разделенных символом «/» и запишем их в массив у. При этом сам «/» туда записываться не будет. Для этого используем метод split объекта (строковой переменной) х.
Теперь, т.к. имя документа содержится в самом конце командной строки, то оно записалось последним элементом в массив у. Теперь записываем в переменную z последний элемент массива у, т.е. имя текущего документа.

Вот и все Теперь имя хранится в переменной z — используй ее, где понадобится.

Облегчать жизнь юзерам и тем самым усложнять ее себе — есть святой долг каждого программера

  • Системное и прикладное программирование
  • ↳ Win API, Shell..
  • ↳ C и C++
  • ↳ Delphi и Pascal
  • ↳ Программирование на Pascal и Delphi (Object Pascal)
  • ↳ Все вопросы ООП
  • ↳ Компоненты в Delphi
  • ↳ Delphi и WinAPI, ActiveX и OLE , COM и DCOM, и т.д
  • ↳ Java
  • ↳ MS Office и VB(A).
  • ↳ Ассемблер
  • WEB программирование
  • ↳ JScript, VBScript, DHTML.
  • ↳ Perl, PHP, ASP .
  • Некатегоризированное
  • ↳ Вопрошайка
  • ↳ SQL
  • ↳ Алгоритмы
  • ↳ Дизайн и графика
  • Администрирование
  • ↳ Apache, IIS.
  • ↳ Операционные системы
  • Работа
  • ↳ Вакансии и заказы для программистов
  • ↳ Поиск работы и заказов.
  • ↳ Решите мне задачку
  • ↳ задачи на Паскале и Delphi
  • ↳ задачи на C и C++
  • ↳ задачи на Basic и Visual Basic (VB)
  • Прочее
  • ↳ Жалобная книга
  • ↳ Флейм.

Как вывести переменную из js в html

В самом простом случае, сначала необходимо в html документе дать элементу в который будем помещать данные — id или класс. Например:

    Chair The Laid back     Heigth 80 cm  id="testData">    

Затем, ниже объявленного искомого объекта, в теле тега необходимо с помощью JavaScript «получить» объект и занести в свойство textContent необходимые данные.

 type="text/javascript"> const data = 'new_test_data'; document.getElementById("testData").textContent = data;  

Передача переменной из html в javascript

Javascript записанный инлайном вызывает смешанные чувства.

Во первых это почти всегда не по кодстайлу.

Во вторых трудно отлаживать.

В третьих Такой код не кушируется браузером.

Внимание дорогой читатель пример выше неправильный более чем полностью, о чем предупреждаю сразу и это как раз то как делать не нужно, а вот о том как правильно вдумчиво и внимательно можно прочитать ниже.

Но если вы к примеру не человек высоких моральными принципов, можете смело копировать и делать с этим вообще что угодно, я вам этого не советовал и более того даже отговаривал.

Я убежден что javascript должен храниться исключительно в файлах,
html дабы обеспечить нормальное кеширование браузерами, и облегчить поиск этого самого скрипта в своем проекте.

Но как же передать значение из php и при этом сохранить красивый код?

Ответ использовать eval() в Javascript.

Рассмотрим пример с подключенимм google maps.

Для начала подключим google maps (библиотеку)

инициализируем начало отрисовки карт сразу после загрузки DOM

var $ = jQuery.noConflict(); $(document).ready(function () < if ($('#map-canvas').length) < function initialize() < var place = eval($("#map-canvas").attr('data-place')); var pos = new google.maps.LatLng(place[0], place[1]); var mapOptions = < center: pos, zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: < style: google.maps.MapTypeControlStyle.DROPDOWN_MENU >, scrollwheel: false, rotateControl: true >; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); map.setTilt(45); var marker = new google.maps.Marker(< position: pos, map: map >); > google.maps.event.addDomListener(window, 'load', initialize); > >);

Создадим необходимые элементы html

Объяснение этой уличной магии

в js нас интересует строка :

var place = eval($("#map-canvas").attr('data-place'));
$("#map-canvas").attr('data-place')

Получает атрибут data-place элемента с id map-canvas после чего eval() преобразует строку [61.784625, 34.350755] в js код , конкретней в массив т.к. присутствуют квадратные скобки.

По спецификации HTML5 ,браузеры пропускают атрибуты тегов начинающихся с data- влиять на отрисовку этот атрибут не будет, но его значение можно использовать в javascript.

Код html можно модифицировать:

с использованием php , так простыми средствами можно передавать целые массивы переменных из php в js не используя инлайнового написания : )

Как передать переменную из Java Script в HTML?

Я делаю проект на Django. Мне необходимо было сделать выпадающие списки на HTML странице. Значения второго списка зависят от первого. Поэтому мне пришлось использовать Java Script. Мне удалось сделать зависимый выпадающий список и отправить информацию в Django о том какие значения списков выбраны.
На основании этих данных, я сформировал Queryset из базы данных и отправил их назад в Java Script через JSON response. На основании сформированных данных из базы данных, я хочу сформировать таблицу.

Я столкнулся с такой проблемой: Как теперь передать полученные данные из Java Script в HTML как переменную, чтобы я смог сформировать таблицу используя шаблонизатор? Т.е передать данные так как мы бы их передали, используя функцию render пример:

return render(request, 'oilcons/index.html', context)

Мой js файл, смотри функцию

aircraftForm.addEventListener
success: function(response) console.log(response)
tablePrint.innerHTML = response — как передать «response» как переменную в HTML

const aircraftInput = document.getElementById('ac_get') const engineInput = document.getElementById('select_eng') const defaultEngine = document.getElementById('default_eng') const btnBox = document.getElementById('btn-submit') const aircraftForm = document.getElementById('ac-eng-form') const csrf = document.getElementsByName('csrfmiddlewaretoken') const flighInput = document.getElementById('flights') const tablePrint = document.getElementById('table_with_data') aircraftInput.addEventListener('change', e=>< console.log(e.target.value) const selectedAircraft = e.target.value engineInput.innerHTML = "" engineInput.appendChild(defaultEngine) engineInput.selectedIndex = 0 btnBox.classList.add('button-disable') $.ajax(< type: 'GET', url: `models-json/$/`, success: function(response) < console.log(response) const enginesData = response.data enginesData.map(item=>< const option = document.createElement('option') option.value = item.Ser_Num option.label = item.Ser_Num console.log(item.Ser_Num) engineInput.appendChild(option) >) engineInput.addEventListener('change', e=>< btnBox.classList.remove('button-disable') >) >, error: function(error) < console.log(error) >>) >) aircraftForm.addEventListener('submit', e=>< e.preventDefault() console.log('submittted') $.ajax(< type: 'POST', url: '/show-data/', data: < 'csrfmiddlewaretoken': csrf[0].value, 'engine': engineInput.value, 'flights': flighInput.value, >, success: function(response) < console.log(response) tablePrint.innerHTML = response >, error: function(error) < console.log(error) >>) >)

Как я хочу сформировать таблицу в HTML:

 
Flight Date Oil quantity, % Oil temperature, % dt, hr Engine FH Oil Consumption, Quarts/hr
Qa Qb Ta Tb QH, raw Average for 10 flights Average for 20 flight Average for 30 flight
> > > > > > > > > > > >
* Oil Consumption limit IAW AMM is 0.25 quart/h
def get_eng_sn(request): if is_ajax(request=request): engine = request.POST.get('engine') flight = int(request.POST.get('flights')) data_to_table = Engine.objects.filter(Ser_Num=engine).order_by('-id')[:flight].values() return JsonResponse(list(data_to_table), safe=False) return JsonResponse()

Буду благодарен за помощь!

  • Вопрос задан 04 мар. 2023
  • 169 просмотров

2 комментария

Средний 2 комментария

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *