Как получить input в JavaScript (1 часть)
На этом уроке мы научимся получать значения, введенные пользователями в поле input и совершать с ними арифметические действия.
HTML разметка
Возьмем за основу бутстраповскую разметку (getbootstrap.com), из раздела Components / Forms. У нас должна получиться форма с двумя полями для ввода чисел и кнопка. Сделаем тип полей у инпутов текстовым, для возможности ввода, как чисел, так и строк.
<div class="form-group">
<h3>Умножение чисел</h3>
<label for="inp_1">Введите число 1:</label>
<input type="text" class="form-control" id="inp_1">
<label for="inp_2">Введите число 2:</label>
<input type="text" class="form-control" id="inp_2">
</div>
<button onclick="multi()" class="btn btn-primary" >Умножить</button>
Для того чтобы обратиться конкретно к элементу input на языке JavaScript, нам нужно к этому элементу добавить уникальный идентификатор. Зададим двум полям input два разных идентификатора: inp_1 / inp_2. На одной странице не может быть двух одинаковых id. Иными словами, функция JS, может обратиться к input, только через название id.
Что мы хотим получить в итоге?
После ввода произвольных чисел в созданные поля формы, при нажатии на кнопку, должно произойти простое арифметическое действие – умножение двух чисел и появиться результат.
Событие JavaScript
Для того, чтобы при нажатии на кнопку что-то срабатывало, добавим событие onclick, при клике будет выполняться функция multi() (произвольное название), круглые скобочки обязательны. Они указывают, что это функция.
Итак, у нас появилась форма, куда можно вводить числа, однако клик по кнопке ничего не дает. Пора заняться непосредственно программированием на JS.
Функция на JavaScript
Между тегами script напишем функцию function и название её multi(), затем внутри фигурных скобочек, пропишем выражение, результат которого, увидим на всплывающем окне alert.
<script>
function multi(){
alert(document.getElementById('inp_1').value*document.getElementById('inp_2').value);
}
</script>
JS получить значение input
Надо вывести результат умножения двух чисел в окне alert, но мы не знаем какие числа пользователь ввел, эти данные надо узнать. Для этого, внутри круглых скобочках alert, обращаемся к элементам input, через метод document.getElementById().
Расшифровывается метод так:
В текущем документе получить элемент по id. Этот метод получает весь элемент input, с классами, типом полей, а нам надо узнать только число, введенное пользователем в поле input - значение value.
document.getElementById('inp_1').value
Получить элемент с id inp_1 и из него вытащить только то, что ввел пользователь. Точно так же, вытаскиваем число и из второго поля.
document.getElementById('inp_2').value
Таким образом, JavaScript узнает числа, введенные пользователем, умножает их и выдает готовый результат в окне alert, после того, как пользователь кликнет по кнопке.
Команда alert помогает разработчику, отлаживать код, находить ошибки в процессе разработки.
Что такое переменная
document.getElementById('inp_1').value*document.getElementById('inp_2').value
Это выражение прекрасно делает свою работу, но при каждом обращении к нему, нам надо переписывать его в таком длинном виде. Это неудобно, код в документе разрастается и становится трудночитаемым. Было бы удобно всю эту длинную запись целиком поместить в маленькую ячейку, на хранение, чтобы вытаскивать оттуда данные, когда потребуется. Такие ячейки и называются в программировании переменными.
Переменные это ячейки, куда можно что-то положить, а затем оттуда вытащить, используя только имя переменной. Продолжение следует..
-
Создано 28.12.2018 10:16:00
-
Михаил Русаков
Комментарии (2):
а как приплюсовать например на моем личном сайте хотелось бы сделать чтоб сумма считалось при заполнении http://manyk.ru/
Ответить
вместо умножения ставлю + не работает мне надо для моего сайта сделать чтоб определить сумму стоимость работ и вывести на сайт http://manyk.ru/
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.