@AleksRap

Почему некорректно работает цикл?

Начал осваивать js. Хочу изменять стиль для блока обертки при фокусе на input. Всего 6 input'ов, соответственно 6 оберток. Сначала написал код для каждого случая отдельно. Все работает, но получилась длинная простыня, решил уменьшить используя массив и цикл, тут и возникла проблема. При использовании цикла - при нажатии на любой input стиль фокусировки применяется только для последнего блока обертки, а не к своему блоку, как должно быть и как это работает в первом случае.

В чем я ошибся?

Разметка
<div class="form-work-group__area">
						<label for="name-group" class="form-work-group__area-title">Название группы</label>
						<input id="name-group" type="text" class="form-work-group__name-group" placeholder="Введите название группы">
					</div>

					<div class="form-work-group__area">
						<label for="alias" class="form-work-group__area-title">Алиас</label>
						<input id="alias" type="text" class="form-work-group__alias form-work-group__alias--error" placeholder="Введите алиас">
					</div>

					<div class="form-work-group__area">
						<label for="email" class="form-work-group__area-title">Электронная почта для обращений</label>
						<input id="email" type="email" class="form-work-group__email form-work-group__email--focus" placeholder="Введите email">
					</div>
					
					<div class="form-work-group__area">
						<label for="phone" class="form-work-group__area-title form-work-group__area-title--color--black">Телефон представителя</label>
						<input id="phone" type="tel" class="form-work-group__phone" placeholder="+7 (XXX) XXX-XX-XX" pattern="\(\d{3}\) \d{3}-\d{2}-\d{2}">
					</div>

					<div class="form-work-group__area">
						<label for="name-man" class="form-work-group__area-title form-work-group__area-title--color--black">ФИО представителя</label>
						<input id="name-man" type="text" class="form-work-group__name-man" placeholder="Введите полные данные представителя">
					</div>

					<div class="form-work-group__area">
						<label for="job-title" class="form-work-group__area-title form-work-group__area-title--color--black">Должность ответственного</label>
						<input id="job-title" type="text" class="form-work-group__job-title" placeholder="Введите полное название должности">
					</div>


Код простыня, но работающий
//Добавляем класс фокуса блоку обертке при фокусе на поле ввода

window.onload = function() {

	document.querySelector('.form-work-group__name-group').onfocus = function() {
		document.querySelector('.form-work-group__area:nth-child(1)').classList.add('form-work-group__area--focus');
	};

	document.querySelector('.form-work-group__name-group').onblur = function() {
		document.querySelector('.form-work-group__area:nth-child(1)').classList.remove('form-work-group__area--focus');
	};


	document.querySelector('.form-work-group__alias').onfocus = function() {
		document.querySelector('.form-work-group__area:nth-child(2)').classList.add('form-work-group__area--focus');
	};

	document.querySelector('.form-work-group__alias').onblur = function() {
		document.querySelector('.form-work-group__area:nth-child(2)').classList.remove('form-work-group__area--focus');
	};


	document.querySelector('.form-work-group__email').onfocus = function() {
		document.querySelector('.form-work-group__area:nth-child(3)').classList.add('form-work-group__area--focus');
	};

	document.querySelector('.form-work-group__email').onblur = function() {
		document.querySelector('.form-work-group__area:nth-child(3)').classList.remove('form-work-group__area--focus');
	};


	document.querySelector('.form-work-group__phone').onfocus = function() {
		document.querySelector('.form-work-group__area:nth-child(4)').classList.add('form-work-group__area--focus');
	};

	document.querySelector('.form-work-group__phone').onblur = function() {
		document.querySelector('.form-work-group__area:nth-child(4)').classList.remove('form-work-group__area--focus');
	};


	document.querySelector('.form-work-group__name-man').onfocus = function() {
		document.querySelector('.form-work-group__area:nth-child(5)').classList.add('form-work-group__area--focus');
	};

	document.querySelector('.form-work-group__name-man').onblur = function() {
		document.querySelector('.form-work-group__area:nth-child(5)').classList.remove('form-work-group__area--focus');
	};


	document.querySelector('.form-work-group__job-title').onfocus = function() {
		document.querySelector('.form-work-group__area:nth-child(6)').classList.add('form-work-group__area--focus');
	};

	document.querySelector('.form-work-group__job-title').onblur = function() {
		document.querySelector('.form-work-group__area:nth-child(6)').classList.remove('form-work-group__area--focus');
	};
};


Код краткий, но не работающий
//Добавляем класс фокуса блоку обертке при фокусе на поле ввода

var className = [".form-work-group__name-group", ".form-work-group__alias", ".form-work-group__email", ".form-work-group__phone", ".form-work-group__name-man", ".form-work-group__job-title"];

window.onload = function() {

	for (i = 0; i < className.length; i++) {

		var areaNumber = ".form-work-group__area:nth-child(" + (i + 1) + ")";

		document.querySelector(className[i]).onfocus = function() {
			document.querySelector(areaNumber).classList.add('form-work-group__area--focus');
		};

		document.querySelector(className[i]).onblur = function() {
			document.querySelector(areaNumber).classList.remove('form-work-group__area--focus');
		};

		console.log(className[i]);
		console.log(areaNumber);
	}
};
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
Stalker_RED
@Stalker_RED
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
mosesfender
@mosesfender
Меланхолик, параноик, падал с коек
Для этого существует :focus в CSS…
Но в данном случае лучше было делегировать события parent'у:
<div data-type="my_inputs">
<input />
<input />
…
<input />
</div>

document.querySelector('[aria-inputs="my_inputs"] input').addEventListener('blur', function(){
   this.target.classList.remove(…);
});

Ну и прочие события.

UPD. бл, что понаписал… пятница…

[].map.call(document.querySelectorAll('[data-type="my_inputs"] input'), function (_input) {
        _input.addEventListener('focus', function (ev) {
…
        });
        _input.addEventListener('blur', function (ev) {
…
        });
    });
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы