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

Но мне кажется это каким то костылем, так как при большом количестве переменных код в js выглядит очень громоздко, к тому же значение id должно быть уникальным, таким образом я не могу использовать одну и ту же переменную больше 1 раза Подскажите решение

Передача переменной из 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 не используя инлайнового написания : )

Как можно передать значение из html в js?

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


Но как передать выбранное значение в файле по сути html в исполняемый код файла js?
Прошу прощения за может быть глупый вопрос ( для тех кто знает ), но для меня это пока что темный лес!

• Вопрос задан более двух лет назад
• 213 просмотров

Как вывести переменную из 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;