Форум

Black_Star · #1 (**permalink**) 16.01.2017, 00:55

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Exam</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<input class="corners" type="range" min="1" max="60" step="1" value="48">
<span>show</span>
<script>
  window.onload = function () { 
      var corners = $('.corners'),
	 	 num = $('span');
     var a = corners.val();
$(function(){
	num.text(a);
	$('.corners').change(function(){
  	a = corners.val();
		console.log(a + "  =a");
		num.text(a);

		return a;
   })
})
   
   var showResalt = Number (a);   
   console.log( showResalt + 'my_range');
   var nov = showResalt + 2;
   console.log(nov + "  = nov");

}

</script>
</body>
</html>

необходимо получать значение "a" из функции и затем при его изменении получать новое значение переменной nov. Подскажите, как повесить правильный слушатель события? Я думал через setInterval но что то мне не очень нравится

Добавлю аналог https://jsfiddle.net/BlackStar1991/dby199qk/8/

рони · #2 (**permalink**) 16.01.2017, 01:53

Сообщение от Black_Star

~~return a~~;

заменить на

nov = showResalt + 2;

Black_Star · #3 (**permalink**) 16.01.2017, 10:23

Чёт не работает. Как то не правильно я понимаю область видимости

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rainebow Balls</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
	<canvas id='canvas' width="800" height="800"></canvas>
	<input class="corners" type="range" min="1" max="60" step="1" value="48">
	<span>show</span>
	
<script>
var corners = $('.corners'),
	 	 num = $('span');
     var a = corners.val();
$(function(){
	num.text(a);
	$('.corners').change(function(){
  	a = corners.val();
		console.log(a + "  =a");
		num.text(a);

		nov = showResalt + 2;
   })
})
   
   var showResalt = Number (a);   
   console.log( showResalt + 'my_range');

   console.log(nov + "  = nov");
</script>
</body>
</html>

ksa · #4 (**permalink**) 16.01.2017, 10:43

Сообщение от Black_Star

Чёт не работает.

Так ошибка у тебя...

Цитата:

Uncaught ReferenceError: nov is not defined

Сообщение от Black_Star

console.log(nov + "  = nov");

ksa · #5 (**permalink**) 16.01.2017, 10:45

Так работает...

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Rainebow Balls</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<canvas id='canvas' width="800" height="800"></canvas>
<input class="corners" type="range" min="1" max="60" step="1" value="48">
<span>show</span>
<script>
var corners = $('.corners');
var num = $('span');
var a = corners.val();
$(function(){
	num.text(a);
	$('.corners').change(function(){
		a = corners.val();
		console.log(a + "  =a");
		num.text(a);
		nov = showResalt + 2;
   })
})
var showResalt = Number (a);   
console.log( showResalt + 'my_range');
//console.log(nov + "  = nov");
</script>
</body>
</html>

Dilettante_Pro · #6 (**permalink**) 16.01.2017, 10:50

Black_Star,
var nov - туда же, где var a

Black_Star · #7 (**permalink**) 16.01.2017, 11:34

Сообщение от ksa

Так работает...

Чёт я не могу понять что именно у Вас работает? В консоле я не вижу что б значение 'my_range' как-то менялось после изменения ползунка да и значение console.log(nov + " = nov"); я не очень понял зачем закомители.

Сообщение от Dilettante_Pro

var nov - туда же, где var a

https://jsfiddle.net/BlackStar1991/dby199qk/14/

не вижу как это может помочь

ksa · #8 (**permalink**) 16.01.2017, 11:37

Сообщение от Black_Star

Чёт я не могу понять что именно у Вас работает?

Так я х/з чего планировал ты...

Но твой пример в моем варианте не дает ошибок в консоли... При изменении ползунка меняются циферки...

Dilettante_Pro · #9 (**permalink**) 16.01.2017, 11:53

Black_Star,

Сообщение от Black_Star

не вижу как это может помочь

Не нужно присваивать что-то - только объявить. Не будет ошибки, о которой писал ksa.
А изменения после перемещения ползунка у вас будут печататься только для a - этот console.log(a + " =a"); находится в обработчике, а остальные console.log срабатывают только один раз, при первоначальном выполнении скрипта

Black_Star · #10 (**permalink**) 16.01.2017, 11:55

Сообщение от ksa

Но твой пример в моем варианте не дает ошибок в консоли... При изменении ползунка меняются циферки..

Они изначально там менялись) Вопрос был не о том.
Мне необходимо что б была возможность работать с динамически меняющееся значение переменной "a" которое я получаю из функции.
(привязать значение этой переменной к другой переменой)

Форум

Справочник

Discord чат

Курсы javascript