Как сделать простой калькулятор для сайта

На сегодняшний день различные калькуляторы, конфигураторы, считалки, помощники выбора имеют огромную популярность, так как одновременно решают сразу несколько задач:

• позволяют представить информацию в максимально удобном виде;
• могут положительно влиять на конверсию сайта;
• повышают поведенческие факторы по SEO;
• в конце концов делают страницу интереснее для пользователя;
• и многое другое.

Сегодня мы рассмотрим несколько примеров использования различных элементов ввода, существующих в HTML, и научимся оперировать их данными.

А именно:

- простое поле ввода; тег <input> в HTML

1 2 3 - раскрывающийся список, тег <select> в HTML

- переключатель; тег <input type="radio"> в HTML

- переключатель; тег <input type="checkbox"> в HTML

ОК - кнопка;

По идее, этих базовых элементов вполне достаточно для создания простых калькуляторов.

Для примера сделаем следующее: число из первого поля будет умножаться на параметр из раскрывающегося списка, складываться с числом, выбранным на переключателе и делиться на последний переключатель. По кнопке "ОК" будет производиться расчет. Делать будем максимально просто и понятно, поэтому будут лишние циклы и переменные, но наша задача - понять принцип действия.

Реализация:

HTML:

<div>
	<input value="10" type="number" id="chislo"> - сюда вводим число; <br /> <br /> <!-- id="chislo" - уникальный идентификатор, по нему мы будем обращаться, чтобы выцепить данные из поля -->
	
	<select id="spisok"> <!-- id="spisok" - уникальный идентификатор, по нему мы будем обращаться, чтобы выцепить данные из полей выбора -->
		<option value="1">1</option>
		<option value="2" selected>2</option>  <!-- аттрибут selected отвечает за пункт, выбранный по умолчанию -->
		<option value="3">3</option> <!-- value = значения, которые соответствуют пунктам списка. -->
		<option value="4">4</option>
	</select> - умножим на это число; <br /> <br />
	
	<input type="radio" value="10" name="n2" checked> 10 <br /> <!-- обратите внимание, что у всех type="radio" должен быть одинаковый аттрибут name="n2", это позволяет объединить их в группу. Знакомый нам аттрибут value также содержит в себе значение, соответствующее данному пункту -->
	<input type="radio" value="20" name="n2"> 20 - прибавим одно из этих чисел<br />
	<input type="radio" value="30" name="n2"> 30 <br /> <br /> 
	
	<input value="2" class="checkbox" type="checkbox" checked> 2 <br />
	<input value="5" class="checkbox" type="checkbox"> 5 - разделим на эти числа <br />
	<input value="10" class="checkbox" type="checkbox"> 10 <br /> <br /> <!-- и снова в value пишем значение, соответствующее данному пункту -->
 
	<button onclick="Start();">Рассчитать!</button>	<br/> <br /> <!-- задаем выполнение функции Start при клике на кнопку -->
	
	<div style="font-weight:bold" id="result"></div> <!-- контейнер для вывода результатов -->
</div>

JavaScript:

<script>
	function Start(){
		var chislo = document.getElementById('chislo').value; //выцепляем значение value первого вводимого поля
		var spisok = document.getElementById('spisok').value; //выцепляем значение value множителя из списка
		
		var radios = document.getElementsByName('n2'); //определяем какой из пунктов выбран и запоминаем его value в переменную radio
		for (var i = 0; i < radios.length; i++) {
			if (radios[i].type == "radio" && radios[i].checked) {
			 	var radio = parseInt ( radios[i].value );
			}
		}
		
		var checkboxes = document.getElementsByClassName('checkbox'); //определяем какие из "галочек" выбраны и запоминаем их value в массив checkbox
		checkbox = []; // задаем пустой массив checkbox
		for (var i = 0; i < checkboxes.length; i++) {
			if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) {
				checkbox[checkbox.length] = checkboxes[i].value;	//дописываем к массиву checkbox значение value, если оно выбрано	
			}
		}
		
		var result = chislo * spisok + 	radio; //элемент первого поля умножаем на значение из списка и прибавляем значение из следующего списка. Промежуточный результат сохраняем в result
		
		for ( var i = 0; i< checkbox.length; i++ ){ //последовательно в цикле делим промежуточный результат result на каждый из элементов массива checkbox (значения value отмеченных галочками пунктов)
			result = result / checkbox[i]; //и снова пишем в переменную result
		}
		
		document.getElementById('result').innerHTML = 'Результат: ' + result; //выводим получившееся значение в div с id="result"
	}
</script>

Скачать исходный код