Начал осваивать 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);
}
};
