Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Почему выделение срабатывает только на 1-ом input? (https://javascript.ru/forum/events/47090-pochemu-vydelenie-srabatyvaet-tolko-na-1-om-input.html)

Erlotaza 08.05.2014 10:54
Почему выделение срабатывает только на 1-ом input?
 
Почему выделение срабатывает только на 1-ом <input>? - ведь второй ничем не отличается.
Заранее благодарен.
скриншот: 

<html>
<body>
		<style>
		.highlight { background: #FA6; }
		</style>

		
<p>Логин</p>
				<input>
<p>Пароль</p>
				<input>
	<script>
		var input = document.getElementsByTagName('input')[0];
						 
			input.onfocus = function() {
				this.className = 'highlight';
			}
						 
			input.onblur = function() {
				this.className = '';
			}
	</script>
	
	
</body>				
</html>

alex.vv 08.05.2014 11:24
Потому что вот это
var input = document.getElementsByTagName('input')[0];

Выбирает первый элемент (индекс [0]) с тэгом input.

А вообще долой изврат!
Надо - так : http://jsfiddle.net/4ndcK/

Erlotaza 08.05.2014 12:51
Спасибо))
У меня стоит задание "именно на JavaScript".
Решил проблему продублировав функцию с дописанием двойки -> input2.
Или можно как то практичнее организовать? (без копирования множества строк)

alex.vv 09.05.2014 20:46
Это кто ж такие задания ставит?))

Цитата:
Решил проблему продублировав функцию с дописанием двойки -> input2.
Мсье знает толк!)

Цитата:
Или можно как то практичнее организовать? (без копирования множества строк)
Есть такое подозрение.

inputs = document.getElementsByTagName('input');
for (input in inputs) {
	if (parseInt(input).toString() == 'NaN') continue;
	inputs[input].onfocus = function() {this.className = 'highlight';};
	inputs[input].onblur = function() {this.className = '';};
}


http://jsfiddle.net/nU2xT/

Erolast 10.05.2014 09:47
При объявлении переменных всегда нужно использовать ключевое слово var, ибо иначе переменная объявляется в глобальной области видимости и засоряет ее, тем самым. Не, ну тут и так в глобальной области видимости объявление будет, но надо привыкать писать правильно.
И еще - к чему эти трюки с for in? Вообще-то, оно делается так:
<html>
<body>
<style>
.highlight { background: #FA6; }
</style>
<p>Логин</p>
<input>
<p>Пароль</p>
<input>
<script>
var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
	inputs[i].onfocus = function() {this.className = 'highlight';};
	inputs[i].onblur = function() {this.className = '';};
}
</script>   
</body>              
</html>


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