Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.08.2012, 13:28
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

Функция взаимодействия двух независимых между собой величин
Помогите составить функцию.

Имеется:

два независимые между собой инпута:
<input type="range" min="1" max="10" id="range1" value="5">
<input type="range" min="1" max="10" id="range2" value="5">

Значения по умолчанию у них одинаковы!

необходимо составить функцию, которая при вызове будет анализировать значения инпутов и в случае изменений в одном из них, записывать в другой такое же значение и возвращать это новое значение.
Ответить с цитированием
  #2 (permalink)  
Старый 19.08.2012, 13:32
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

можно даже не кодом, а на словах сказать
Ответить с цитированием
  #3 (permalink)  
Старый 19.08.2012, 13:47
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script>
      $(function() {
        
        var inputs = $( 'input[type="range"]' );
        $( inputs ).on( 'change', handler );
        
        function handler() {
          var value = this.value
          $( inputs ).each( function( index ) {
            inputs[ index ].value = value;
          });
        }
        
      })
    </script>
  </head>
  <body>
	<input type="range" min="1" max="10" id="range1" value="5">
	<input type="range" min="1" max="10" id="range2" value="5">
  </body>
</html>
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 19.08.2012 в 13:59.
Ответить с цитированием
  #4 (permalink)  
Старый 19.08.2012, 13:55
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

Точно, массивом. спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 19.08.2012, 22:57
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

без jq никуда

<input type="range" min="1" max="10" id="range1" value="5">
<input type="range" min="1" max="10" id="range2" value="5">

<script>
window.onload = function () {
	var range1 = document.getElementById('range1');
	var range2 = document.getElementById('range2');

	document.body.onchange = function (e) {
		var target = e.target;
		if (target.id == 'range1') {
			range2.value = target.value;
		} else 
		if (target.id == 'range2') {
			range1.value = target.value;
		}
	}
	
}
</script>

PS: видимо нужна поддержка только хрома и оперы (может быть сафари)
http://htmlbook.ru/html/input/type
https://developer.mozilla.org/en-US/.../Element/input
Ответить с цитированием
  #6 (permalink)  
Старый 20.08.2012, 10:51
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
MySQl дата между двух дат mycoding Серверные языки и технологии 8 14.02.2011 15:23