Форум

Erlotaza · #1 (**permalink**) 08.05.2014, 10:54

Почему выделение срабатывает только на 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 · #2 (**permalink**) 08.05.2014, 11:24

Потому что вот это

var input = document.getElementsByTagName('input')[0];

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

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

Erlotaza · #3 (**permalink**) 08.05.2014, 12:51

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

alex.vv · #4 (**permalink**) 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 · #5 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript