получить значение тега JS
Потому что получать значение нужно непосредственно в обработчике.
Сейчас же ты выводишь то, что было сохранено при загрузке страницы.
var addTime = document.getElementById('add'); addTime.addEventListener('click', getN); function getN()
Write time: AddОтслеживать
ответ дан 15 июл 2017 в 22:01
80.8k 9 9 золотых знаков 78 78 серебряных знаков 134 134 бронзовых знака
Спасибо. Все работает теперь!)
15 июл 2017 в 22:03
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как получить input в JavaScript (1 часть)
На этом уроке мы научимся получать значения, введенные пользователями в поле input и совершать с ними арифметические действия.
HTML разметка
Возьмем за основу бутстраповскую разметку (getbootstrap.com), из раздела Components / Forms. У нас должна получиться форма с двумя полями для ввода чисел и кнопка. Сделаем тип полей у инпутов текстовым, для возможности ввода, как чисел, так и строк.
Умножение чисел
Для того чтобы обратиться конкретно к элементу input на языке JavaScript, нам нужно к этому элементу добавить уникальный идентификатор. Зададим двум полям input два разных идентификатора: inp_1 / inp_2. На одной странице не может быть двух одинаковых id. Иными словами, функция JS, может обратиться к input, только через название id.
Что мы хотим получить в итоге?
После ввода произвольных чисел в созданные поля формы, при нажатии на кнопку, должно произойти простое арифметическое действие – умножение двух чисел и появиться результат.
Событие JavaScript
Для того, чтобы при нажатии на кнопку что-то срабатывало, добавим событие onclick, при клике будет выполняться функция multi() (произвольное название), круглые скобочки обязательны. Они указывают, что это функция.
Итак, у нас появилась форма, куда можно вводить числа, однако клик по кнопке ничего не дает. Пора заняться непосредственно программированием на JS.
Функция на JavaScript
Между тегами script напишем функцию function и название её multi(), затем внутри фигурных скобочек, пропишем выражение, результат которого, увидим на всплывающем окне alert.
JS получить значение input
Надо вывести результат умножения двух чисел в окне alert, но мы не знаем какие числа пользователь ввел, эти данные надо узнать. Для этого, внутри круглых скобочках alert, обращаемся к элементам input, через метод document.getElementById().
Расшифровывается метод так:
В текущем документе получить элемент по id. Этот метод получает весь элемент input, с классами, типом полей, а нам надо узнать только число, введенное пользователем в поле input — значение value.
Получить элемент с id inp_1 и из него вытащить только то, что ввел пользователь. Точно так же, вытаскиваем число и из второго поля.
Таким образом, JavaScript узнает числа, введенные пользователем, умножает их и выдает готовый результат в окне alert, после того, как пользователь кликнет по кнопке.
Команда alert помогает разработчику, отлаживать код, находить ошибки в процессе разработки.
Что такое переменная
document.getElementById(‘inp_1’).value*document.getElementById(‘inp_2’).value
Это выражение прекрасно делает свою работу, но при каждом обращении к нему, нам надо переписывать его в таком длинном виде. Это неудобно, код в документе разрастается и становится трудночитаемым. Было бы удобно всю эту длинную запись целиком поместить в маленькую ячейку, на хранение, чтобы вытаскивать оттуда данные, когда потребуется. Такие ячейки и называются в программировании переменными.
Переменные это ячейки, куда можно что-то положить, а затем оттуда вытащить, используя только имя переменной. Продолжение следует..
Создано 28.12.2018 10:16:00
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 2 ):
dryg 23.06.2020 00:51:23
а как приплюсовать например на моем личном сайте хотелось бы сделать чтоб сумма считалось при заполнении http://manyk.ru/
dryg 23.06.2020 01:41:51
вместо умножения ставлю + не работает мне надо для моего сайта сделать чтоб определить сумму стоимость работ и вывести на сайт http://manyk.ru/
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Как получить значение из input javascript
Для ввода простейшей текстовой информации предназначены элементы
Данный элемент поддерживает ряд событий, в частности:
- focus : происходит при получении фокуса
- blur : происходит при потере фокуса
- change : происходит при изменении значения поля
- input : происходит при изменении значения поля
- select : происходит при выделении текста в текстовом поле
- keydown : происходит при нажатии клавиши клавиатуры
- keypress : происходит при нажатии клавиши клавиатуры для печатаемых символов
- keyup : происходит при отпускании ранее нажатой клавиши клавиатуры
Применим ряд событий:
Здесь к текстовому полю прикрепляется три обработчика для событий blur, focus и change. Обработка события change позволяет сформировать что-то вроде привязки: при изменении текста весь текст отображается в блоке printBlock. Но надо учитывать, что событие change возникает не сразу после изменения текста, а после потери им фокуса.
Обработка события потери фокуса blur позволяет провести валидацию введенного значения. Например, в данном случае если текст состоит из пробелов или не был введен, то окрашиваем границу поля в красный цвет.
Кроме события change мы можем обрабатывать изменение введенного текста, обрабатывая событие input . Но если событие change возникает, когда пользователь закончит ввод и переведт фокус с текстового поля на другой элемент, то событие input возникает сразу при вводе нового символа или удаления имеющегося:
const keyBox = document.search.key; // обработчик изменения текста function oninput(e) < // получаем элемент printBlock const printBlock = document.getElementById("printBlock"); // получаем новое значение const val = e.target.value; // установка значения printBlock.textContent = val; >keyBox.addEventListener("input", oninput);
Поле ввода пароля
Однако само вводимое значение никак не шифруется, и мы его можем спокойно получить:
METANIT.COM
Скрытое поле
Если нам надо, чтобы на форме было некоторое значение, но чтобы оно было скрыто от пользователя, то для этого могут использоваться скрытые поля:
Для скрытого поля обычно не используется обработка событий, но также, как и для других элементов, мы можем в javascript получить его значение или изменить его.
Элемент textarea
Для создания многострочных текстовых полей используется элемент textarea :
Данные элемент генерирует все те же самые события, что и обычное текстовое поле:
Здесь к текстовому полю прикрепляются обработчики для событий keypress и keydown. В обработчике keypress получаем введенный символ с помощью конвертации числового кода клавиши в строку:
const val = String.fromCharCode(e.keyCode);
Затем символ добавляется к содержимому блока printBlock.
Событие keypress возникает при нажатии на клавиши для печатаемых символов, то такие символы отображаются в текстовом поле. Однако есть и другие клавиши, которые оказывают влияние на текстовое поле, но они не дают отображаемого символа, поэтому не отслеживаются событием keypress. К таким клавишам относится клавиша Backspace, которая удаляет последний символ. И для ее отслеживания также обрабатываем событие keydown. В обработчике keydown удаляем из строки в блоке printBlock последний символ.
HTML DOM Объект Input Number
Объект Input Number представляет собой HTML элемент с type=»number».
Примечание: Элемент с type=»number» are not supported in Internet Explorer 9 and earlier versions.
Доступ к объекту Input Number
Вы можете получить доступ к элементу с type=»number» используя getElementById():
Пример
var x = document.getElementById(«myNumber»);
Совет: Вы также можете получить доступ путем поиска элементов по коллекции форм.
Доступ к объекту Input Number
Вы можете получить доступ к элементу с type=»number» используя document.createElement():
Пример
var x = document.createElement(«INPUT»);
x.setAttribute(«type», «number»);
Свойства объекта Input Number
| Свойство | Описание |
|---|---|
| autocomplete | Устанавливает или возвращает значение атрибута автозаполнения числового поля |
| autofocus | Устанавливает или возвращает, должно ли числовое поле автоматически получать фокус при загрузке страницы |
| defaultValue | Устанавливает или возвращает значение по умолчанию для числового поля |
| disabled | Устанавливает или возвращает, отключено или нет числовое поле |
| form | Возвращает ссылку на форму, содержащую числовое поле |
| list | Возвращает ссылку на список данных, содержащий числовое поле |
| max | Устанавливает или возвращает значение атрибута max числового поля |
| min | Устанавливает или возвращает значение атрибута min числового поля |
| name | Устанавливает или возвращает значение атрибута name числового поля |
| placeholder | Устанавливает или возвращает значение атрибута заполнителя числового поля |
| readOnly | Устанавливает или возвращает, доступно ли числовое поле только для чтения или нет |
| required | Устанавливает или возвращает, нужно ли заполнять числовое поле перед отправкой формы |
| step | Устанавливает или возвращает значение атрибута шага числового поля |
| type | Возвращает, к какому типу элемента формы относится числовое поле |
| value | Устанавливает или возвращает значение атрибута value числового поля |
Методы объекта Input Number
| Метод | Описание |
|---|---|
| stepDown() | Уменьшает значение введенного числа на указанное число |
| stepUp() | Увеличивает значение введенного числа на указанное число |
Стандартные свойства и события
Объект Input Number также поддерживает стандартные свойства и события.
Связанные страницы
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.