Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Массив кнопок, узнать индекс нажатой кнопки (https://javascript.ru/forum/dom-window/32918-massiv-knopok-uznat-indeks-nazhatojj-knopki.html)

DarkDaemon 04.11.2012 06:27
Массив кнопок, узнать индекс нажатой кнопки
 
Имеется массив кнопок button[]. Как узнать индекс нажатой кнопки? Два часа рылся в интернете, а так же на этом форуме, ответ не нашел. Я решил задачу, но считаю, что должно быть решение проще:

<script>
function ins(e){
	var o = document.getElementsByName('butt[]');
	for (i=0;i<o.length;i++){
		if (o(i) == e) alert ('Индекс ' + i);
	}
}
</script>
<input type='button' name='butt[]' value='ok1' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok2' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok3' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok4' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok5' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok6' onclick='ins(this)'/>

vadim5june 04.11.2012 08:50 
function ins(t){
alert(t.value.substring(2,3));	
}

bes 04.11.2012 10:48
на чистом js без цикла вроде никак, не прибегая к ручному заданию номеров и их извлечению (например, как показал vadim5june)

Цитата:
Сообщение от DarkDaemon
(o(i)
o[i]
добавить return, o.length - в отдельную переменную (хотя и Фленаган и Илья Кантор почему-то этого не делают, хотя по идее это выражение вычисляется каждый раз
http://es5.javascript.ru/x12.html#x12.6.3
Цитата:
Повторить
Если присутствует первое Expression, то
Пусть testExprRef будет результатом вычисления первого Expression.
)
видимо из-за того, что машины стали слишком производительными :)
PS: атрибут onclick уже давно признак плохого стиля, не

DarkDaemon 04.11.2012 13:31
Цитата:
Сообщение от vadim5june (Сообщение 213970) 
function ins(t){
alert(t.value.substring(2,3));	
}
А если кнопки называются одинаково? Такое решение не подойдет ;)

Цитата:
Сообщение от bes (Сообщение 213974)
PS: атрибут onclick уже давно признак плохого стиля
А что лучше использовать?

Спасибо за детальные замечания, поправил код:
function ins(e){
	var o = document.getElementsByName('butt[]');
	var l = o.length;
	for (i=0; i<l; i++){
		if (o[i] == e) {var ind = i; break;}
	}
	alert ('Индекс ' + ind);
}

vadim5june 04.11.2012 13:40
Цитата:
Сообщение от DarkDaemon
А если кнопки называются одинаково? Такое решение не подойдет
если одинаково название то и в Вашем случае будет ошибка когда нажмете вторую из одинаковых

bes 04.11.2012 13:57
что-нибудь типа такого
<form id="form">
	<input type='button' name='butt[]' value='ok1'/>
	<input type='button' name='butt[]' value='ok2'/>
	<input type='button' name='butt[]' value='ok3'/>
	<input type='button' name='butt[]' value='ok4'/>
<form>

<script>
window.onload = function () {
	function index(element, collection) {
		var len = collection.length;
		for (var i = 0; i < len; i++) {
			if (element == collection[i]) {
				return i;
			}
		}
	}
	document.getElementById('form').onclick = function (e) {
		var e = e || event;
		var target = e.target || e.srcElement;
		if (target.type == 'button') {
			alert(index(target, document.getElementsByName('butt[]')));
		}
	}

}
</script>


Цитата:
Сообщение от DarkDaemon
А что лучше использовать?
свойство onclick, назначать через addEventListener/attachEvent (в отличие от свойства onclick назначенные действия не затрут предыдущие назначенные)
см. ненавязчивый javascript

DarkDaemon 04.11.2012 15:20
Цитата:
Сообщение от bes (Сообщение 214025)
что-нибудь типа такого
свойство onclick, назначать через addEventListener/attachEvent (в отличие от свойства onclick назначенные действия не затрут предыдущие назначенные)
см. ненавязчивый javascript
Да, более изящное решение :) Спасибо!

DarkDaemon 04.11.2012 15:23
Цитата:
Сообщение от vadim5june (Сообщение 214021)
если одинаково название то и в Вашем случае будет ошибка когда нажмете вторую из одинаковых
Никакой ошибки нет ;)

<script>
function ins(e){
    var o = document.getElementsByName('butt[]');
    var l = o.length;
    for (i=0; i<l; i++){
        if (o[i] == e) {var ind = i; break;}
    }
    alert ('Индекс ' + ind);
}
</script>
<input type='button' name='butt[]' value='ok' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok' onclick='ins(this)'/>
<input type='button' name='butt[]' value='ok' onclick='ins(this)'/>

bes 04.11.2012 15:29
Цитата:
Сообщение от DarkDaemon
ror (i=0; i&lt;l; i++)
перестал использовать l, так как здесь на форуме некорректно отображается:)

vadim5june 04.11.2012 15:36
Цитата:
Сообщение от DarkDaemon
Никакой ошибки нет
Да нормально работает-это я ошибся

Your 05.11.2012 07:08 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		function key(self) {
			var doc=document.getElementsByName(self.name);
			for(var i in doc) {
				if(doc[i]===self) {
					alert(i);
				}
			}
		}
	</script>
	<input type="button" name="butt[]" value="ok0" onclick="key(this)">
	<input type="button" name="butt[]" value="ok1" onclick="key(this)">
	<input type="button" name="butt[]" value="ok2" onclick="key(this)">
</body>
</html>


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