Простой онлайн калькулятор на JavaScript

Введите число 2

Результат

Теперь, пошагово я постараюсь объяснить как это сделать.

Создание формы.

Форму создавать, я думаю, каждый сможет. Если нет, то это всего лишь один тег <form>.Но нужно, как вы уже догадались, использовать еще и input. Вписываем определенный слова перед ними и все, дальше только начинять их. Вот что у меня вышло:

<form>
Введите число 1 <input type="text" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
Введите число 2 <input type="text" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
<input type="button" value="Рассчитать">
<input type="reset" value="Сброс"><br><br>
Результат <input type="text"></form>

Как видите я добавил к инпут две функции. Onchange и onkeyup. Onkeyup должен(в данном случае) убирать все значения при вводе их в форму кроме цифр. А onchange должен убирать все значения при вставке их в форму. Конечно если я правильно понял.

Форма наша пости готова, осталось создать функцию калькулятора и добавить переменные в form. Выделим например 1-ому числу имя «a»(Лат.). 2-ому «b»(Лат.). А выходному «total». Вот что у меня получилось:


<form>
Введите число 1 <input type="text" name="a" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
Введите число 2 <input type="text" name="b" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
<input type="button" value="Рассчитать">
<input type="reset" value="Сброс"><br><br>
Результат <input type="text" name="total"> </form>

Ах да. Забыл.. Ведь после этой формы(см. выше), «Расчитать» не убедт иметь никакого значения. Просто будет нажиматься. Но и задавать ему функцию калькулятора нету пока смысла, так как функции еще нету =). Поэтому приступим к созданию мозга калькулятора. Создаем javascript и сразу даем ему название:

<script lang="JavaScript">
function calculator(form) {
}
</script>

Вместо слова calculator можно вводить что угодно, напрмиер evgen.

В нашей функции создаем перменные, которые ранее мы добавили в форму:

a = eval(form.a.value); //Присваем a значение из первого поля
a b = eval(form.b.value); //Присваем b значение из второго поля b
c = a+b; //Слаживаем занчения a и b
form.total.value = c; //Выдаем результат

Все это надо поместить между скобками внутри функции. То есть вот так:

<script lang="JavaScript">
function calculator(form) {
a = eval(form.a.value);
b = eval(form.b.value);
c = a+b; form.total.value = c;
}
</script>

Теперь, с готовым мозгом, можно задать функцию «расчитать». Для это возвращаемся к форме и ищем следующую строку:

<input type="button" value="Рассчитать">

Добавляем к ней onclick=»calculator(this.form)». Тоесть при клике на эту кнопку, воспроизведется функция calculator! Вот и весь калькулятор..

<script lang="JavaScript">
function calculator(form) {
a = eval(form.a.value);
b = eval(form.b.value);
c = a+b;
form.total.value = c;
}
</script>
<form>
Введите число 1 <input type="text" name="a" onchange="this.value=this.value.replace(/([^0-9])/g,'');" onkeyup="var n=this.value.replace(/([^0-9])/g,''); if(n!=this.value) this.value=n;"><br><br>
Введите число 2 <input type="text" name="b" onkeyup="this.value=this.value.replace(/([^0-9])/g,'');"><br><br><br>
<input type="button" value="Рассчитать" onclick="calculator(this.form)">
<input type="reset" value="Сброс"><br><br>
Результат <input type="text" name="total">
</form>