Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Вывод результата расчета по Кнопке (https://javascript.ru/forum/jquery/48059-vyvod-rezultata-rascheta-po-knopke.html)

zeusrvp 18.06.2014 10:25

Вывод результата расчета по Кнопке
 
Добрый день , никак не могу прикрутить кнопку, не хочет она и все рассчитывать по кнопке.

Сам Скрипт
$(function () {
	$("#amount_slider").slider({ 
		orientation: "horizontal",
		range: false,
		min: 10000,
		max: 2000000,
		value: 100000,
		step: 1000,
		slide: function (event, ui) {
			$("#amount").text(ui.value);
			calculatePayment()	
		}
	});
	$("#amount").text($("#amount_slider").slider("value")); 
	
	$("#time_slider").slider({
		orientation: "horizontal",
		range: false,
		min: 0,
		max: 64,
		value: 6,
		step: 6,
		slide: function (event, ui) {
			$("#time").text(ui.value);
			calculatePayment()
		}
	});
	$("#time").text($("#time_slider").slider("value"));


	function calculatePayment() {
		var amount = $("#amount_slider").slider("value");
		var interest = $("select#my_select").val() / 100;
		var time = $("#time_slider").slider("value") * 1;
		var rate = amount * (interest * Math.pow(1 + interest, time)) / (Math.pow(1 + interest, time) - 1);
		$("#result").text(rate.toFixed(2));
		
	}
	calculatePayment()
	
});


Это ХТМЛ,

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="js/loan.js"></script>
	<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" />
	<title>Кредитный калькулятор</title>
	
</head>
<body>
<style type="text/css"> 

#amount_slider, #interest_slider, #time_slider 
{ 
width: 200px;
 margin-top: 20px; 
 float: left; 
} 

#amount, #interest, #time, #result { 
margin-left: 20px; 
margin-top: 20px; 
float: left; } 

#result { 
font-weight: bold; } 
.message { float: left; 
margin-top: 20px; 
font-family:Arial; 
width: 100px; } 

.clear { clear: both; } 
</style>

<div> 
	<div class="message">Сумма кредита</div><div id="amount_slider"></div><div id="amount">     </div> 
	<div class="clear"></div> 
	
   	<select id="my_select" name="my_select">
        <option value="12">Авто</option>
        <option value="10">Недвижимость</option>
        <option value="15">Экспресс</option>
         </select>
	<div class="clear"></div> 
	<div class="clear"></div> <div class="message">Срок (мес)</div><div id="time_slider"></div>
	<div id="time"></div> 
	<div class="clear"></div> <div class="message">Платеж в месяц</div><div id="result"></div> 
	<div class="clear"></div> 
 


<br />

</body>
</html>

При таком коде работает все , тока результат сразу на странице отображается в Диве Result, он вызывается после каждого сдвига ползунка , calculatePayment()
а также после расчета
calculatePayment(),

А мне надо что бы я выставил значения , нажал на кнопку и вышел расчет в том же Диве Result

Делал кнопку добавлением в ХТМЛ
<div onClick="calculatePayment();" style="cursor:hand;cursor:pointer;">Рассчитать</div>

И соответственно в JS убирал
calculatePayment()
Но расчет не идет ..

Пробовал так же
Button прописовать в хтмл , c onClick="calculatePayment() нет результата,

рони 18.06.2014 10:50

zeusrvp,
в строке 40 скрипта поставьте клик на див иначе функция calculatePayment из вне недоступна... ферштейн?

zeusrvp 18.06.2014 11:43

Цитата:

Сообщение от рони (Сообщение 317047)
zeusrvp,
в строке 40 скрипта поставьте клик на див иначе функция calculatePayment из вне недоступна... ферштейн?

я попытался не вышло ,
Вас бы не затруднило привести пример , по данному коду,
Допустим что я назначил Диву на который нажимают
id = raschet

тогда в JS мне надо
var raschet = document.getElementById("raschet");
raschet.onclick = что тут мне вписать , пробывал разные варианты не проканало , может как о все это можно сократить ?

Спасибо.

рони 18.06.2014 11:49

zeusrvp,
raschet.onclick = calculatePayment;

zeusrvp 18.06.2014 12:00

Цитата:

Сообщение от рони (Сообщение 317072)
zeusrvp,
raschet.onclick = calculatePayment;

Что то не идет не хочет (((
Сейчас вот так
function calculatePayment() {
		var amount = $("#amount_slider").slider("value");
		var interest = $("select#my_select").val() / 100;
		var time = $("#time_slider").slider("value") * 1;
		var rate = amount * (interest * Math.pow(1 + interest, time)) / (Math.pow(1 + interest, time) - 1);
		$("#result").text(rate.toFixed(2));
		var raschet = Document.getElementById("raschet");
raschet.onclick = calculatePayment();

	}

Везде убрал calculatePayment() что бы сам не считал автоматом..

Диву в html так прописал
<div id="raschet" style="cursor:hand;cursor:pointer;">Рассчитать</div></div>


:cray: :(

рони 18.06.2014 12:04

zeusrvp,
это типа строка 40 -- нетрогайте функцию -- ставьте ваши строки ниже функции

рони 18.06.2014 12:10

zeusrvp,
:cray:
$(function () {
	$("#amount_slider").slider({
		orientation: "horizontal",
		range: false,
		min: 10000,
		max: 2000000,
		value: 100000,
		step: 1000,
		slide: function (event, ui) {
			$("#amount").text(ui.value);
			calculatePayment()
		}
	});
	$("#amount").text($("#amount_slider").slider("value"));

	$("#time_slider").slider({
		orientation: "horizontal",
		range: false,
		min: 0,
		max: 64,
		value: 6,
		step: 6,
		slide: function (event, ui) {
			$("#time").text(ui.value);
		   //	calculatePayment()
		}
	});
	$("#time").text($("#time_slider").slider("value"));


	function calculatePayment() {
		var amount = $("#amount_slider").slider("value");
		var interest = $("select#my_select").val() / 100;
		var time = $("#time_slider").slider("value") * 1;
		var rate = amount * (interest * Math.pow(1 + interest, time)) / (Math.pow(1 + interest, time) - 1);
		$("#result").text(rate.toFixed(2));

	}
	//calculatePayment()

var raschet = document.getElementById("raschet");
raschet.onclick = calculatePayment;

});

zeusrvp 18.06.2014 12:37

Спасибо огромное все вышло ) , :)

Я вам просто кусок кода привел выше ) я не трогал весь код ,


Совсем заработался. )

Спасибо Вам еще раз.

zeusrvp 20.06.2014 13:32

Подскажите , как по моему коду, сделать

Отображение Ползунков только при выборе Программы
<select id="my_select" name="my_select">
<option value="12">Авто</option>
<option value="10">Недвижимость</option>
<option value="15">Экспресс</option>
</select>


И как сделать что бы при выборе например Авто
Значения менялись
Например так
Если выбрано Авто , то
$("#amount_slider").slider({
		orientation: "horizontal",
		range: false,
		min: 100,
		max: 200,
		value: 100000,
		step: 10000,
		slide: function (event, ui) {
			$("#amount").text(ui.value);
			//calculatePayment()
		}
	});
	$("#amount").text($("#amount_slider").slider("value"));


Если выбрана Недвижомость то
$("#amount_slider").slider({
		orientation: "horizontal",
		range: false,
		min: 1000000,
		max: 2000000,
		value: 100000,
		step: 10000,
		slide: function (event, ui) {
			$("#amount").text(ui.value);
			//calculatePayment()
		}
	});
	$("#amount").text($("#amount_slider").slider("value"));

рони 20.06.2014 13:51

zeusrvp,
для начала - минимум 100 максимум 200 откудаже value стотысяч и шаг 10000
читайте медитируйте над документацией на Ползунок UI
и может в раздел работа если быстро нужно? или пробуйте писать код ...


Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.


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