Javascript-форум - Калькулятор стоимости

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - Калькулятор стоимости (https://javascript.ru/forum/css-html/32524-kalkulyator-stoimosti.html)

M@shroom

19.10.2012 11:09

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

Добрый день, форумчане!
сразу оговорка - я в javascript новичок, поэтому прошу на глупые вопросы хотябы отвечать, а не слать в гугл.

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

#1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript'>
function validate() {
	var agregat1="рег1";
	var agregat2="рег2";
	var agregat3="рег3";
	var agregat4="рег4";
  //Считываем значения поля kvadratura в переменную j_kvadratura
  var j_kvadratura=document.forms["form"]["kvadratura"].value;
  //прописываем условия для выбора регистратора
  if ((j_kvadratura<=200) && (j_kvadratura>=50)) {
    document.write(рег4);
  }
  else if ((j_kvadratura<=400) && (j_kvadratura>=200)) {
    document.write(рег1);
  } 
  else if ((j_kvadratura<=600) && (j_kvadratura>=400)) {
    document.write(рег2);
  }
  else if ((j_kvadratura<=1000) && (j_kvadratura>=600)) {
    document.write(рег3);
  }
  else {document.write('Неверно введена квадратура');
  }
} 
</script>
</head>
<form name="form">
квадратура: <input type="text" name="kvadratura"><br />
<br /><input type="button" value="111" onclick="validate()">
</form>

<body>
</body>
</html>

Мне нужно будет считать стоимость услуг, как начать?
Я добился того что скрипт в зависимости от введенного в input значения выбирает регистратор. Как теперь добиться того, чтобы к этому регистратору привязывалась его цена?

#2
Как мне вывести результат именно в том месте, где мне надо, например в DIV?

vashurin

19.10.2012 13:04

Цитата:

Сообщение от M@shroom (Сообщение 211168)

Как мне вывести результат именно в том месте, где мне надо, например в DIV?

http://javascript.ru/tutorial/dom/intro#innerhtml

M@shroom

19.10.2012 13:24

Пардон, но не понятно.
Допустим, я хочу вывести результат выполнения функции validate() в тег <div></div>
мне в div писать innerHTML, или куда?

vashurin

19.10.2012 13:52

Цитата:

Сообщение от M@shroom (Сообщение 211179)

<html>
<head>
<title>!!!</title>
<script>
function t(){
document.getElementById('another_id').innerHTML = document.getElementById('someid').value;
}
</script>
</head>
<body>

<input type="text" value="Напиши сюды!" id="someid"/><input type="button" value="Ткни сюды!" onclick="t()"/>
<div id="another_id"></div>
</body>
</html>

M@shroom

19.10.2012 14:54

Цитата:

Сообщение от vashurin (Сообщение 211189)

<html>
<head>
<title>!!!</title>
<script>
//объявляем функцию без переменных
function t(){
//приравниваем переменную another_id к someid
document.getElementById('another_id').innerHTML = document.getElementById('someid').value;
}
</script>
</head>
<body>
//создаем поле для ввода текста
<input type="text" value="Напиши сюды!" id="someid"/>
//создаем кнопку, которая вызывает функцию t()
<input type="button" value="Ткни сюды!" onclick="t()"/>
//выводим значение переменной another_id
<div id="another_id"></div>
</body>
</html>

так?

Только вот в моем примере есть 4 условия, мне нужно не просто вывод переменной, а вывести результат работы фунцкии... немогу...

Цитата:

сразу оговорка - я в javascript новичок

vashurin

19.10.2012 15:02

Цитата:

Сообщение от M@shroom;

Только вот в моем примере есть 4 условия, мне нужно не просто вывод переменной, а вывести результат работы фунцкии... немогу...

Ну что же вам мешает сделать, например так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript'>
function validate() {
        var result = 'Неверно введена квадратура';
	var agregat1="рег1";
	var agregat2="рег2";
	var agregat3="рег3";
	var agregat4="рег4";
  //Считываем значения поля kvadratura в переменную j_kvadratura
  var j_kvadratura=document.forms["form"]["kvadratura"].value;
  //прописываем условия для выбора регистратора
  if ((j_kvadratura<=200) && (j_kvadratura>=50)) {
    result = agregat4;
  }
  else if ((j_kvadratura<=400) && (j_kvadratura>=200)) {
    result = agregat1;
  } 
  else if ((j_kvadratura<=600) && (j_kvadratura>=400)) {
    result = agregat2;
  }
  else if ((j_kvadratura<=1000) && (j_kvadratura>=600)) {
    result = agregat3;
  }
  document.getElementById('result').innerHTML = result;
} 
</script>
</head>
<body>
<form name="form">
квадратура: <input type="text" name="kvadratura"><br />
<br /><input type="button" value="111" onclick="validate()">
</form>
<div id="result"></div>

</body>
</html>

Это это основы программирование. А вывод результата, это задача одной функции в любом языке программирования...

M@shroom

19.10.2012 15:11

Ничего не мешает! Класс! Спасибо большое!

Цитата:

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

как привязать цену к каждому элементу?
В общем мне надо чтобы считалась цена + выводилось имя выбраной системы...

Your	22.10.2012 05:25

vashurin, а что если там будут до миллиона числа, вы также насильно заставите?)

vashurin

22.10.2012 09:31

Цитата:

Сообщение от Your (Сообщение 211556)

vashurin, а что если там будут до миллиона числа, вы также насильно заставите?)

:) Пусть M@shroom сам придумает алгоритм и реализацию выборки вариантов :). Как я писал выше, все это основы программирования, не имеющие отношения к какому то конкретному языку.
На вопрос, касающийся реализации в конкретном языке:

Цитата:

Как мне вывести результат именно в том месте, где мне надо, например в DIV?

Ответ я дал даже с примером :)

Your	22.10.2012 11:49

var agregat1="рег1 200 500";

Ну можно делать и оригинальнее как-то)
Массивом например.

M@shroom

22.10.2012 12:52

Собственно, специфика работы заказчика сайта позволяет сделать калькулятор только до 1000 кв.м. так что методы, описанные vashurin вполне подходят.
Теперь другой вопрос: Как вывести результат того, что насчитает калькулятор в PDF файл в виде ком.предложения? Калькулятор работает на джумле 1.5. В результате появляется табличка. Вот ее бы в PDF.
Спасибо всем большое за участие!!!

M@shroom

22.10.2012 15:23

И еще вопрос по строковым переменным -
Есть переменная, скажем accessories, она будет выводиться в div, как сделать, чтобы допустим в случае, если квадратура больше или равна 400 кв.м. то в аксессуары добавлялся, скажем, усилитель, через запятую...

в общем - как выводить строковые переменные через запятую?

M@shroom

23.10.2012 08:10

Ха! Справился... как же приятно самому до чего нибудь додуматься )

document.getElementById('accessories').innerHTML = (string1+" ,"+string2);
<tr>
    <td>Аксессуары:</td>
    <td id="accessories">&nbsp;</td>

M@shroom

23.10.2012 19:30

Друзья, помогайте!

очередное затруднение...
Как сделать несколько условий?
нужно чтобы переменные принимали значения только если "чекнуты" два определенных инпута...

<html>
<head>
<script type='text/javascript'>
function montazh() {
	var montazh_summa = 0;
		if (document.getElementById('da').checked) {
    			else if (document.getElementById('distant').checked){
				montazh_summa = ('kazamola batikoza');
}

		document.getElementById('montazh_summa').innerHTML = montazh_summa;
}
</script>
</head>


<body>
<form name="form">
<input type="radio" name="1" id="da" onchange="montazh()"> Да<br />
<input type="radio" name="1" id="net" onchange="montazh()"> Нет<br />
3. Выберите тип управления:<br/>
<input type="radio" name="upravlenie" id="uprovodka"> Управляющая проводка<br />
<input type="radio" name="upravlenie" id="distant"> Дистанционное управление<br />
</form>

<div id="montazh_summa"></div>
</body>
</html>

поправьте, пожалуйста... не работает...

M@shroom

24.10.2012 08:51

Ура! оказалось нужны еще скобки...
вот так:

if ((document.getElementById('da').checked) && (document.getElementById('distant').checked)) {
			(distant_pult_price=3) && (distant_pult_name=", пульт дистанционного управления");
		}
		else if  ((document.getElementById('net').checked) && (document.getElementById('distant').checked)) {
			(distant_pult_price=0) && (distant_pult_name=" ");
		}

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