Функция взаимодействия двух независимых между собой величин
Помогите составить функцию.
Имеется: два независимые между собой инпута: <input type="range" min="1" max="10" id="range1" value="5"> <input type="range" min="1" max="10" id="range2" value="5"> Значения по умолчанию у них одинаковы! необходимо составить функцию, которая при вызове будет анализировать значения инпутов и в случае изменений в одном из них, записывать в другой такое же значение и возвращать это новое значение. |
можно даже не кодом, а на словах сказать :help:
|
<!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>
|
Точно, массивом. спасибо!
|
без 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 |
спасибо!
|
| Часовой пояс GMT +3, время: 13:45. |