Делаем калькулятор с расчетом в реальном времени на JavaScript

Кстати, вы обновили WordPress до версии 4.9? Очень крутое обновление. О нем я еще напишу, но что самое ценное - редактор WP начинает походить на IDE. Т.е. теперь если нужно быстро поправить файлы - удобно это делать и через редактор админки.

Теперь хватит отвлекаться. Мы постепенно улучшаем наши познания в Javascript и сегодня мы займемся созданием калькулятора, который будет показывать результат в реальном времени при изменении разных параметров - раскрывающийся список, чекбокс, радиобаттон и текстовое поле.

Для примера будем использовать форму Заказа пирога. Пользователь делает выбор в форме, а общая цена рассчитывается в реальном времени.

Работа с элементами формы

Прежде чем мы перейдем к JavaScript, нам нужно сделать форму для заказа:

Это просто базовый код HTML для формы. Мы будем вызывать функции JavaScript внутри событий «onclick» и «onchange» элементов формы. Эти функция - это то, что вычисляет и обновляет цену. Так что. самое время переходить к JS.

Как ссылаться на объект формы в JavaScript

Прежде чем мы сможем сделать какие-либо вычисления в форме, мы должны связать форму и наш JavaScript. Чтобы получить объект формы, мы используем атрибут id. Наш идентификатор формы - «cakeform».

Как использовать радиобаттоны в расчете

Чтобы использовать радиобаттоны при расчете, нам нужно дать радиокнопкам имена. Все кнопки, принадлежащие к одной группе, должны иметь одинаковое имя. Таким образом, если у вас было несколько групп радиобаттонов, код нужно различать, какие группы идут друг с другом. Мы дали радиокнопкам в имена «selectedcake».

У каждого типа торта есть своя цена. Мы должны взять эту цену в расчете. Однако мы не хотим устанавливать величину радиокнопки как цену на торт. Когда вы получаете форму на стороне сервера, то менее полезно когда caketype = 20, а не caketype = 'Round6'.

Чтобы сопоставить радиобаттон «размер торта» с его ценой, мы используем ассоциативный массив.

Поскольку есть несколько радиокнопок, нам нужно знать, какой из них выбран пользователем. Мы делаем это, перебирая их (создаем цикл) и проверяя, отмечена ли текущая кнопка.

Как использовать раскрывающийся список в расчете

Ниже приведен вариант раскрывающегося списка из примера «cakeform».

Здесь нам нужно сопоставить цену начинки и выбранное значение.

Мы снова используем ассоциативный массив для сопоставления с ценой. Например, если пользователь должен выбрать Лимон, тогда цена будет равна 5.

И вот сценарий, который находит цену начинки из раскрывающегося списка:

Как использовать чекбокс в расчете

У нас есть чекбокс, чтобы выбрать, включать ли свечи в заказ или нет. Вот наш код HTML для флажка:

Чтобы проверить, был ли установлен флажок, мы вызываем свойство .checked. Если свойство .checked равно true, пользователь установил флажок. Если пользователь установил флажок, мы установили переменную (candlePrice) = 5, иначе она останется равной 0.

Использование текстового поля в расчете

Предположим, что у нас есть текстовое поле для «количества». Ниже приведен код HTML:

Поскольку пользователь вводит числовое значение непосредственно в текстовое поле, мы не сохраняем ассоциативный массив для сопоставления с числом. Мы можем использовать функцию parseInt(). Вот функция JavaScript:

Получение итогов

Теперь, когда мы знаем, как работать с элементами формы, мы можем рассчитать цены тортов в заказах.

Мы вызываем функцию, называемую getTotal(), когда выбраны формы Radio Buttons, Select и Checkbox. Для вызова этой функции мы обработали события «onclick» и «onchange». Onclick запускается, когда пользователь нажимает радио кнопку или чекбокс. Onchange запускается, когда пользователь делает выбор с помощью выпадающего.

У нас есть четыре функции в нашем JavaScript-коде, которые возвращают число. Функция getTotal () вызывает все четыре из этих функций и добавляет их, чтобы получить общее количество. Затем мы показываем общее количество.

Мы обновляем innerHTML totalprice каждый раз, когда рассчитывается итог.

Создаем анимированные иконки с помощью Snap.svg... Анимированные элементы стали неотъемлемой частью настольных и мобильных сайтов. Анимация SVG набирает популярность, и в этой статье мы покажем, как со...
6 непопулярных, но очень удобных возможностей ES6... Статья про 6 непопулярных, но очень удобных возможностей ES6. Как известно, стандарт Ecmascript 6 опубликовали в июне 2015. Но так как многое уже импл...
Переводим таблицу Excel в HTML с сохранением функционала, используя Javascript... В этом уроке мы разберем, как перевести таблицу Excel в HTML, с сохранением интерактивных элементов и формул. В итоговую верстку HTML можно будет внос...

Опубликовано в 17:53, 21 ноября 2017 | Обновлено в 17:53, 21 ноября 2017 | Просмотров: 98