Скрипт калькулятора стоимости

Для того, чтобы составить скрипт, нужно уметь складывать, вычитать да умножать. Особой сложности не будет. Примеры в статье приведены на самые разные темы. Но, поскольку их довольно много можно уловить суть действа.

Пункты, которые нужно заполнять пользователям

Событие oninput происходит когда элемент меняет своё значение в момент фокуса.

длина ширина
площадь прямоугольника

<form onsubmit="return false;"

oninput=" 
document.getElementById('rezultat').innerHTML 
= 
parseFloat(document.getElementById('a').value)
*
parseFloat(document.getElementById('b').value)
"
>
длина <input id="a" type="number"> ширина <input id="b" type="number">  
площадь прямоугольника <output id="rezultat"></output>
</form>

или так

<script type="text/javascript">
function changeText0(){
 var rezultat = 1;
 rezultat *= parseFloat(document.getElementById('a').value);
 rezultat *= parseFloat(document.getElementById('b').value); 
 document.getElementById('rezultat').innerHTML = rezultat;
}
</script>

<form onsubmit="return false;" oninput="changeText0()">
длина <input id="a" type="number"> ширина <input id="b" type="number">  
площадь прямоугольника <output id="rezultat"></output>
</form>

Другой пример.

Добавим выпадающий список

Событие onchange происходит когда элемент меняет своё значение на момент потери фокуса. Видно в IE. Поэтому если присутствуют два разных типов input, к которым лучше применить разное событие, выносим скрипт за форму.

мм
см
м
км
=

1

мм

<script type="text/javascript">
function changeText(){
 var rezultat1 = 0;
 var odin = document.getElementById('odin').value;
 var spisok = document.getElementById('spisok').options[document.getElementById('spisok').selectedIndex].value;
 rezultat1 = parseFloat(odin);
 rezultat1 *= parseFloat(spisok); 
 document.getElementById('rezultat1').innerHTML = rezultat1;
}
</script>

<form onsubmit="return false;">
<input id="odin" type="number" value="1" oninput="changeText()"> <select id="spisok" onchange="changeText()">
<option value="1">мм</option>
<option value="10">см</option>
<option value="1000">м</option>
<option value="1000000">км</option>
</select> = <output id="rezultat1">1</output> мм
</form>

Добавим чекбокс type="checkbox"

Событие onclick происходит при щелчке левой клавишей мышки на элементе. На основе этого скрипта.

для расчёта площади круга

1

площадь квадрата = квадрату его стороны S = a²
площадь круга = квадрату его радиуса умноженного на число "пи" S = ?R²

<style type="text/css">
  #rezultat2:before { content: "площадь квадрата  "; }
  #krug:checked ~ #rezultat2:before { content: "площадь круга  "; }
</style>

<script type="text/javascript">
function kalkulyator(){
  var rezultat2 = 1;
  rezultat2 *= parseFloat(document.getElementById('odin1').value) * parseFloat(document.getElementById('odin1').value);
  if (document.getElementById('krug').checked)
     rezultat2 *= parseFloat(document.getElementById('krug').value);
  document.getElementById('rezultat2').innerHTML = rezultat2;
}
</script>

<form onsubmit="return false;">
<input id="odin1" type="number" value="1" oninput="kalkulyator()"> 
<label for="krug">для расчёта площади круга</label> <input type="checkbox" id="krug" value="3.141592653589793" onclick="kalkulyator()"/>
<output id="rezultat2">1</output>

площадь квадрата = квадрату его стороны S = a<sup>2</sup>
площадь круга = квадрату его радиуса умноженного на число "пи" S = ?R<sup>2</sup>
</form>

С помощью псевдокласса :checked и псевдоэлемента :before меняем текст перед результатом.

Добавим флажок type="radio"

То же самое, что и выше.

год
каждый год, например, 2012
исключение, каждый сотый год, например, 2100
число дней в году:

366

<script type="text/javascript">
function kalkulyator4(){
if (document.getElementById('vis').checked)
     var flag = document.getElementById('vis').value;
if (document.getElementById('vis1').checked)
     var flag = document.getElementById('vis1').value;

if (parseFloat(document.getElementById('god').value)/parseFloat(flag)  == parseInt(document.getElementById('god').value/parseFloat(flag)) )
{ document.getElementById('rezultat4').innerHTML = 366; }
else
{ document.getElementById('rezultat4').innerHTML = 365; };
}
</script>

<form onsubmit="return false;">
год <input id="god" type="number" value="2012" oninput="kalkulyator4()"> 
<label>каждый год, например, 2012 <input type="radio" id="vis" value="4" checked="checked" name="raz10" onclick="kalkulyator4()"/></label>
<label>исключение, каждый сотый год, например, 2100 <input type="radio" id="vis1" value="400" onclick="kalkulyator4()" name="raz10"/></label>
число дней в году: <output id="rezultat4">366</output>
</form>

Проверка на целое число javascript

Столкнулась в этом примере, поскольку года, которые делятся на 4 без остатка, являются високосными (искл. каждый сотый год, но не каждый четырёхсотый). Условие такое:

if (parseFloat(document.getElementById('god').value)/4 == parseInt(document.getElementById('god').value/4) )
{ ... }
else
{ ... }; 

parseFloat возвращает дробное число,
parseInt возвращает целое число.

Смена select в зависимости от установленного флажка

материки часть света

Евразия
Африка
Северная Америка
Южная Америка
Австралия
Антарктида

Европа
Азия
Африка
Америка
Австралия и Океания
Антарктида

Площадь

54

млн. км²

<style type="text/css">
  #b15:checked ~ #spisok15 { display: none; }
  #a15:checked ~ #spisok14 { display: none; }
</style>

<script type="text/javascript">
function kak(){

if (document.getElementById('a15').checked)
     var flag15 = document.getElementById('spisok15').options[document.getElementById('spisok15').selectedIndex].value;

if (document.getElementById('b15').checked)
     var flag15 = document.getElementById('spisok14').options[document.getElementById('spisok14').selectedIndex].value;

document.getElementById('rezultat15').innerHTML = parseFloat(flag15);
}
</script>

<form onsubmit="return false;" onchange="kak()">

материки <input type="radio" id="a15" checked="checked" name="raz15"/> часть света <input type="radio" id="b15" name="raz15"/>

<select id="spisok15">
<option value="54">Евразия</option>
<option value="30">Африка</option>
<option value="24">Северная Америка</option>
<option value="17">Южная Америка</option>
<option value="9">Австралия</option>
<option value="14">Антарктида</option>
</select><select id="spisok14">
<option value="11">Европа</option>
<option value="43">Азия</option>
<option value="30">Африка</option>
<option value="42">Америка</option>
<option value="9">Австралия и Океания</option>
<option value="14">Антарктида</option>
</select>

Площадь <output id="rezultat15">54</output> млн. км<sup>2</sup>
</form>

Ещё примеры.