Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Работа с ползунком (https://javascript.ru/forum/events/42720-rabota-s-polzunkom.html)

Moloch 06.11.2013 20:28

Работа с ползунком
 
Здравствуйте подскажите как сделать чтобы радиокнопками можно было обычными кнопками упавлять но так, что если ползуном мы остановились на пятом радио и если после этого я нажал например правую кнопку выбрался шестой радиобаттон?
вот я код для кнопок написал не пойму только как поймать индекс элемента массива возвращенного getElementsByName.
<form action="handler.php">
	
	<div id = "sineva">
			<input type="radio" checked name="alc" value = "abscent" id = "zero">
			<label for="zero" class="blue"><span></span>Абсент</label>
			
			<input type="radio" name="alc" value = "vodka" id = "one">
			<label for="one" class="blue"><span></span>Водка</label>
			
			<input type="radio"name="alc" value = "djin"id = "two">
			<label for="two" class="blue"><span></span>Джин</label>
			
			<input type="radio"name="alc" value = "wiskey"id = "three">
			<label for="three" class="blue"><span></span>Виски</label>
			
			<input type="radio"name="alc"  value = "liker"id = "four">
			<label for="four" class="blue"><span></span>Ликер</label>
			
			<input type="radio"name="alc"  value = "brandi"id = "five">
			<label for="five" class="blue"><span></span>Бренди</label>
			
			<input type="radio"name="alc"  value = "qalvados"id = "six">
			<label for="six" class="blue"><span></span>Кальвадос</label>
			
			<input type="radio"name="alc"  value = "tekil"id = "seven">
			<label for="seven" class="blue"><span></span>Текилла</label>
			
			<input type="radio"name="alc"  value = "rome"id = "eight">
			<label for="eight" class="blue"><span></span>Ром</label>
			
			<input type="radio"name="alc"  value = "wine"id = "nine">
			<label for="nine" class="blue"><span></span>Вино</label>
			
			<input type="radio"name="alc"  value = "beer"id = "ten">
			<label for="ten" class="blue"><span></span>Пиво</label>
			
	</div>
	<div id = "vibor">
		<input type = "button" value = "←" id = "levo">
		<input id = "polzunok" type="range" min="0" max="10" step="1" value="0"> 
		<input type = "button" value = "→" id = "pravo">
		
	</div>
 </form>

index = 0;

function toleft() {
	var l = document.getElementById("levo");
	var polzunok = document.getElementById("polzunok");
	if (index)
	index-=1;
	polzunok.setAttribute("value",index);
	var alc = document.getElementsByName ('alc');
	alc[index].setAttribute("checked","checked");
	alert(index);
}

function toright() {
	var p = document.getElementById("pravo");
	var polzunok = document.getElementById("polzunok");
	index+=1;
	polzunok.setAttribute("value",index);
	var alc = document.getElementsByName ('alc');
	alc[index].setAttribute("checked","checked");
	
	alert(index);
	
}
function checkradio() {
document.getElementsByName ('alc') [this.value].checked = 1;

}

window.onload = function() { 
		var polzunok = document.getElementById("polzunok");
		polzunok.oninput = checkradio;
		var l = document.getElementById("levo"),
		p = document.getElementById("pravo");
		l.onclick= toleft;
		p.onclick= toright;
		
		}


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