Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Онлайн калькулятор (https://javascript.ru/forum/jquery/15340-onlajjn-kalkulyator.html)

NeoMurderer 22.02.2011 21:34

Онлайн калькулятор
 
Нужен небольшой онлайн калькулятор с условием.Желательно на jQuery но можно и на JS .Будет выглядеть примерно так:
Есть одно поле в которое можно будет вводить некое число от 1.
Нужно что бы эо число множилось на число которое пишится отдельно.
Если введённое число от 1 до 3 по множится по допустим x если от 4 ло 7 то на y и если от 8 и больше то множится на число z.Можно такео как то организовать?

SkyLight 22.02.2011 22:06

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

NeoMurderer 22.02.2011 22:10

Ок попробую,просто в JS дерево :write:

NeoMurderer 23.02.2011 16:52

Вот и ошибка пришла,перейменная не изменяется динамично при ходе операций.Код
<script lang="JavaScript">

function calculator(form) {
 if (form.a.value==1,2,3)
 {form.b.value==1}
 else if (form.a.value==3,4,5,6,7)
 {form.b.value==2}
  else
 {form.b.value==3}
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>

<input style="display:none" type="text" name="b" value="3"><br><br><br>

<input type="button" value="Рассчитать" onclick="calculator(this.form)">

<input type="reset" value="Сброс"><br><br>

Результат <input type="text" name="total">

</form>

cmygeHm 24.02.2011 11:26

Прости. Но ты помоему хрень какую-то написал. Можно было и получше сделать. Если вопрос еще интересен, то могу помочь. Я не профессионал, но в твой код даже вчитываться не стал. :no:

NeoMurderer 24.02.2011 15:33

cmygeHm, этот код,точнее половину я где то скопировал,а вопрос еще как актуален:help:

NeoMurderer 24.02.2011 15:34

P.S читай выше
Цитата:

просто в JS дерево

cmygeHm 24.02.2011 15:43

jquery подключать умеешь? документ.онрэди знаешь что такое?

если да, то вод подсказка
$('document').ready(function(){

	$("#id_of_calc_button").click(function(){    // при нажатии на кнопку с ид id_of_calc_button делаем следующее

		var arg1 = $("#id_of_first_input").val(); // в арг1 теперь значение из первого текстового поля
		var arg2 = $("#id_of_second_input").val(); // в арг2 - из второго

		//перемножаем:
		var res = arg1 * arg2;
		//показываем
		alert(res);
	});

});

NeoMurderer 24.02.2011 16:24

cmygeHm, спасибо,щас попробую,с jQuery более менее знаком

NeoMurderer 24.02.2011 16:31

Разобрался, но как сделать что бы результат выводился например в какомто диве или что то типа такого?

cmygeHm 24.02.2011 17:07

берешь его по айдишнику и пишешь в него. например в див:
$("#id").text('text');
или
$("#id").html('<p>html-text</p>');


или в input type=text:
$("#id').val('спасибо в карман не положишь! жми плюсик!');


:)

NeoMurderer 24.02.2011 17:40

Ок,всё работает как часы но еще с условием If else.Пишу так
if (arg1 == 1,2,3 )
  { arg2 = 700 ;}
  else if (arg1 == 4,5,6,7) 
  {arg2 = 500 ;}

  else  {arg2 = 300 ;}

Всё пашет отлично но когда вводиш например 10 то показывает результат умножения на 700.Как сделать что бы нормально пахало?

cmygeHm 24.02.2011 17:45

поставить firebug и научиться им дебагить? ;)

cmygeHm 24.02.2011 17:48

кстати я еще никогда не видел такого сравнения переменных arg1==1,2,3
:blink:

NeoMurderer 24.02.2011 17:49

Стоит как штык :write: ,но в чём проблемма неразберусь

cmygeHm 24.02.2011 17:50

а ты в нем дебагить умеешь?

NeoMurderer 24.02.2011 17:53

Да,не первый день.Давай дам код ,а ты скажеш что не так?
<script lang="JavaScript">
var jQ = false;
function initJQ() {
  if (typeof(jQuery) == 'undefined') {
    if (!jQ) {
      jQ = true;
      document.write('<scr' + 'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></scr' + 'ipt>');
    }
    setTimeout('initJQ()', 50);
  } else {
    (function($) {
    $(function() {

      // здесь пишем jQuery код

    })
    })(jQuery)
  }
}
initJQ();
</script>
<script lang="JavaScript">

$('document').ready(function(){
 
    $("#id_of_calc_button").click(function(){    // при нажатии на кнопку с ид id_of_calc_button делаем следующее
 
        var arg1 = $("#id_of_first_input").val(); // в арг1 теперь значение из первого текстового поля
        var arg2 = $("#id_of_second_input").val(); // в арг2 - из второго
  if (arg1 == 1,2,3 )
  { arg2 = 700 ;}
  else if (arg1 == 4,5,6,7) 
  {arg2 = 500 ;}

  else  {arg2 = 300 ;}

 if (arg1 == 1)
 {
 var day = " день " ;}
 else if (arg1 == 2)
 { var day = " дня " ;}
 else {var day = " дней " ;}
 
        //перемножаем:
        var res = "Цена на " + arg1 + day  + arg1 * arg2 + " рублей";
        //показываем
        alert(res);
		
	
    });
 
});

</script>

<form>

Введите количество дней <input type="text" name="a" id="id_of_first_input"><br><br>

<input style="display:none" type="text" id="id_of_second_input" name="b" value="300">

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


</form>

cmygeHm 24.02.2011 17:57

нет, я говорить ничего не буду. Я вижу три варианта:
1. ты заменяешь дикое для меня и двух других программистов "arg==1,2,3" на "arg==1 || arg==2 || arg==3"
2. ты дебагишь и находишь ошибку сам.
3. ты идешь пить чай, отдыхать, а когда приходишь - все работает :)

cmygeHm 24.02.2011 17:59

Вот это
<script lang="JavaScript">
var jQ = false;
function initJQ() {
  if (typeof(jQuery) == 'undefined') {
    if (!jQ) {
      jQ = true;
      document.write('<scr' + 'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></scr' + 'ipt>');
    }
    setTimeout('initJQ()', 50);
  } else {
    (function($) {
    $(function() {

      // здесь пишем jQuery код

    })
    })(jQuery)
  }
}
initJQ();
</script>


замени на
<script src="jquery.min.js"></script>
,
где jquery.min.js - скачаный по этой ссылке файл: http://ajax.googleapis.com/ajax/libs.../jquery.min.js

NeoMurderer 24.02.2011 18:01

Всё отлично работает еще раз спасибо;)

cmygeHm 24.02.2011 18:03

так как решился вопрос?


Часовой пояс GMT +3, время: 22:51.