От делать нечего(хотя вру, делать было что) решил сделать простенький калькулятор на JavaScript. Только сложение(+). Вот кстати он сам:
Теперь, пошагово я постараюсь объяснить как это сделать.
Создание формы.
Форму создавать, я думаю, каждый сможет. Если нет, то это всего лишь один тег <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>
Спасибо!
а как подправить, чтоб на автомате результат выдовал — без клика на результат
loli, можно повесить функцию на onblur (когда с форму убрали активность) либо делать по таймеру... Больше я не знаю как.
Помогите!! калькулятор типо сделал но мне надо не такой а вот такой:
<i> Жарков Александр Павлович </i>но я не могу разобраться как минус и плюс сделать помогите плизз
Жарков Александр Павлович
Никак не могу понять, какой все-таки калькулятор вам нужен?
И все таки просьба выложить тоже самое, только с выводом результата без нажатия на кнопку «Расчитать» и вообще без этой кнопки. По типу как на сайте — там в поле вводишь значение, а в остальных автоматом считается все и выводится.
Ну здесь много точек зрения. Мне, допустим, было удобнее сделать с кнопкой...
помогите не работает(канкулятор)
function recalc ()
{
a=document.f1.p1.value;
b=document.f1.p2.value;
c=a*b;
document.f1.p3.value=c
}
*
devil, код, работающий с input, должен находится в form. Значит и функция должна быть привязана к форме. В селекторах убрать цифры и привязывать не к документу, а опять же к форме.
спасибо автору!
здравствуйте. я новичёк, хотел бы попросить поподробнее описать как
интегрировать этот калькулятор на страничку.
Закинуть в корневую папку сайта в формете .js, или же вставить в html код страницы, или вообще нужно несколько файлов использовать?
Вставляю в html код страницы, вводятся числа, первое и второе, есть проверка вводимых даных ( отсекает всё кроме цифр), но не считается результат, в чём может быть проблема?
Александр. Вставлять нужно в html.
Вставил, не работает...
Странно, но сообщение в окошке ( тож на js ) работает нормально, но вот не считает почему то калькулятор, не выводит результат, хотя проверка введённых данных работает нормально
Даже нет идей, в чем может быть проблема.
Спасибо за урок! Очень помогло. Можете глянуть на моем сайте )
Чтобы пересчет производился при переходе с поля, нужно через точку с запятой добавить calculator (this.form) в onchange. Т.е. для первого поля будет: onchange="this.value=this.value.replace (/([^0-9])/g,''); calculator (this.form)", для второго — аналогично. Если же хотите, чтобы рассчет производился после ввода каждого символа, а не в момент перехода на другое поле, тогда ту же calculator (this.form) нужно вставлять в onkeyup: onkeyup="var n=this.value.replace (/([^0-9])/g,''); if (n!=this.value) this.value=n; calculator (this.form)"
Автору большое спасибо за отличный пример — никогда не писал подобного, тут за 5 минут разобрался...
Григорий, спасибо за дополнительную информацию и за отзыв.