Степан Резников
Часто при инициализации JS-компонента нужно найти определенный DOM-элемент с которым компонент будет работать, а также достать из HTML параметры (настройки). О способах хранения и передачи в JS этих параметров я и хотел бы поговорить.
Раньше я решал эту задачу так: простые параметры передавал через классы, сложные — через дополнительные (не всегда валидные) атрибуты или дочерние элементы.
Предположим, у нас есть DOM-элемент:
При клике на этот элемент мы хотим показывать некий попап. Для показа попапа нужно задать следующие параметры: ширина, высота, таскаемость попапа и текст. Раньше я написал бы примерно следующее:
Потом я бы долго и муторно получал значения этих параметров путем выпарсивания их из классов и доставания из дочерних элементов.
Так бы и мучился дальше, если бы мой коллега Дима Филатов не подсказал гораздо более элегантное решение — прописать атрибут onclick в котором возвращать объект с настройками.
Как достать этот объект:
По сути, для передачи настроек используется формат JSON в котором есть шесть типов значений: объект, массив, строка, число, булевское значение и null. Используя эти типы, можно передавать довольно сложную структуру данных, немыслимую для передачи через классы.
Passing HTML input value as a JavaScript Function Parameter
I am new to JavaScript, and I’m trying to figure out how to pass user-inputted values as a parameter to a JavaScript function. Here is my code:
8 Answers 8
One way is by using document.getElementByID , as below —
Firstly an elements ID should always be unique. If your element IDs aren’t unique then you would always get conflicting results. Imagine in your case using two different elements with the same ID.
1 IDs are meant to be unique
2 You dont need to pass any argument as you can call them in your javascript
You can get the values with use of ID . But ID should be Unique.
do you use jquery? if then:
or use original javascript(DOM)
if you want to learn more, w3chool can help you a lot.
Use this it will work,
I like how most answers here don’t know that javascript accepts every input as string unless we use parseInt. Yes, you can pass parameters in that way. Just a little modification
-
The Overflow Blog
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.11.43304
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Передача переменной из 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 не используя инлайнового написания : )
передать переменную из html в javascript
Я хочу передать User id для javascript, я пытаюсь сделать это с помощью этого: var u_id = document.getElementById(‘id’) но он говорит, что u_id равен нулю, кому я могу его передать? Спасибо!
задан 13 марта ’13, 13:03
document.getElementById(‘id’) даст вам элемент DOM с идентификатором id, а не фактический идентификатор элемента — letiagoalves
Если сценарий будет должным образом разделен на файл и указан в теге сценария в заголовке, запишите необходимые данные либо в скрытое поле, либо в атрибут данных элементов. Таким образом, вы можете использовать только скрипт для доступа к тому, что вам нужно, вместо хакерского встроенного скрипта. Если скрытое поле, например, имеет идентификатор «userId», вы можете сделать что-то похожее на $(«#userId»).val() чтобы получить идентификатор пользователя. — Nope
3 ответы
Вы должны написать переменную непосредственно в коде JavaScript:
На самом деле, когда вы используете document.getElementById() в JavaScript вы получаете элемент DOM. И не переменная @id , Переменная @id не существует события для JavaScript.
Почему?
Я думаю, вы используете Rails. @id является переменной Rails. Rails компилирует шаблоны (на сервере) перед отправкой окончательной html-страницы пользователю. Это означает, что он заменяет все <% %> по результатам каждого блока, которые представляют собой обычный текст.
Затем JavaScript запускается в клиентском браузере. Он не знает о Rails.
Когда ты делаешь var u_id = <%= @id %>; Rails компилирует его во что-то вроде var u_id = 198297; который отправляется в клиентский браузер. Тогда JavaScript счастлив, переменная установлена правильно.
ответ дан 13 мар ’13, в 13:03
Не уверен в точном синтаксисе, но использовал бы <input type=»hidden» value=@id/> на странице и var userId =$(«#userId»).val() в файле скрипта тоже не работает и разделяет слои? Я предполагаю, что это гибкое решение, в котором сценарий может быть не встроен в страницу, а находиться в отдельном файле. — Неа
Должно сработать. Но вы также можете использовать глобальную область видимости JavaScript, просто определите переменную на этой странице с помощью <script>var u_id = <%= @id %>;</script> и использовать u_id переменная везде в JavaScript, даже в отдельных файлах. Я бы не стал добавлять поле html только для этой цели. — максдек
@ Нет, имхо, твой комментарий достоин ответа . Я бы дал тебе +1. Я поддерживаю прогу и из-за настроек безопасности мне не разрешено выполнять скрипты в возрасте. Ваше предложение работает для меня. — Дж. Х. Бонариус
