Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   input type="range" слушатель события. (https://javascript.ru/forum/dom-window/66883-input-type%3D-range-slushatel-sobytiya.html)

Black_Star 16.01.2017 00:55

input type="range" слушатель события.
 
Добрый день уважаемые. Вот возникла необходимость при изменении значения ползунка производить некий пересчет значений в остальном коде. Подскажите как реализовать. Приведу пример
<!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/

рони 16.01.2017 01:53

Цитата:

Сообщение от Black_Star
return a;

заменить на
nov = showResalt + 2;

Black_Star 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 16.01.2017 10:43

Цитата:

Сообщение от Black_Star
Чёт не работает.

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

Uncaught ReferenceError: nov is not defined
Цитата:

Сообщение от Black_Star
console.log(nov + "  = nov");


ksa 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 16.01.2017 10:50

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

Black_Star 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 16.01.2017 11:37

Цитата:

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

Так я х/з чего планировал ты... :D
Но твой пример в моем варианте не дает ошибок в консоли... При изменении ползунка меняются циферки...

Dilettante_Pro 16.01.2017 11:53

Black_Star,
Цитата:

Сообщение от Black_Star
не вижу как это может помочь

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

Black_Star 16.01.2017 11:55

Цитата:

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

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


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