Передача переменной из html в javascript
Javascript записанный инлайном вызывает смешанные чувства.
Во первых это почти всегда не по кодстайлу.
Во вторых трудно отлаживать.
В третьих Такой код не кушируется браузером.
Внимание дорогой читатель пример выше неправильный более чем полностью, о чем предупреждаю сразу и это как раз то как делать не нужно, а вот о том как правильно вдумчиво и внимательно можно прочитать ниже.
Но если вы к примеру не человек высоких моральными принципов, можете смело копировать и делать с этим вообще что угодно, я вам этого не советовал и более того даже отговаривал.
Я убежден что javascript должен храниться исключительно в файлах,
html дабы обеспечить нормальное кеширование браузерами, и облегчить поиск этого самого скрипта в своем проекте.
Но как же передать значение из php и при этом сохранить красивый код?
Ответ использовать eval() в Javascript.
Рассмотрим пример с подключенимм google maps.
Для начала подключим google maps (библиотеку)
инициализируем начало отрисовки карт сразу после загрузки DOM
Создадим необходимые элементы html
Объяснение этой уличной магии
в js нас интересует строка :
Получает атрибут data-place элемента с id map-canvas после чего eval() преобразует строку [61.784625, 34.350755] в js код , конкретней в массив т.к. присутствуют квадратные скобки.
По спецификации HTML5 ,браузеры пропускают атрибуты тегов начинающихся с data- влиять на отрисовку этот атрибут не будет, но его значение можно использовать в javascript.
Код html можно модифицировать:
с использованием php , так простыми средствами можно передавать целые массивы переменных из php в js не используя инлайнового написания : )
Степан Резников
Часто при инициализации JS-компонента нужно найти определенный DOM-элемент с которым компонент будет работать, а также достать из HTML параметры (настройки). О способах хранения и передачи в JS этих параметров я и хотел бы поговорить.
Раньше я решал эту задачу так: простые параметры передавал через классы, сложные — через дополнительные (не всегда валидные) атрибуты или дочерние элементы.
Предположим, у нас есть DOM-элемент:
При клике на этот элемент мы хотим показывать некий попап. Для показа попапа нужно задать следующие параметры: ширина, высота, таскаемость попапа и текст. Раньше я написал бы примерно следующее:
Потом я бы долго и муторно получал значения этих параметров путем выпарсивания их из классов и доставания из дочерних элементов.
Так бы и мучился дальше, если бы мой коллега Дима Филатов не подсказал гораздо более элегантное решение — прописать атрибут onclick в котором возвращать объект с настройками.
Как достать этот объект:
По сути, для передачи настроек используется формат JSON в котором есть шесть типов значений: объект, массив, строка, число, булевское значение и null. Используя эти типы, можно передавать довольно сложную структуру данных, немыслимую для передачи через классы.
Передать переменную из HTML в файл JS
Я пытаюсь передать значение из HTML-страницы в файл JS.
Я не уверен, как я могу передать переменную wizardresultid из HTML в JavaScript. Я могу найти примеры, как передать функцию с помощью кнопки, а не как сделать это по ссылке. Кроме того, я пытаюсь отобразить wizardresultid в тексте. Это правильный способ сделать это:
Спасибо за вашу помощь.
4 ответа
Вы должны использовать data-attribute в html и получить это в js с помощью .attr ().
Wizardresultid — это второй параметр в функции обратного вызова SweetAlert. Вы не можете ссылаться на этот параметр вне этой конкретной функции обратного вызова.
Вместо этого вы должны использовать $(this).attr(‘id’) , который получает идентификатор целевого элемента в функции обратного вызова click, как в:
Рекомендуемый атрибут data. лайк
И доступ с помощью:
Простым способом было бы добавить его к вашему идентификатору и использовать класс для события on click, тогда вы можете разделить идентификатор.
Как вывести переменную из js в html
В самом простом случае, сначала необходимо в html документе дать элементу в который будем помещать данные — id или класс. Например:
Затем, ниже объявленного искомого объекта, в теле тега <script> необходимо с помощью JavaScript "получить" объект и занести в свойство textContent необходимые данные.