Как сделать onFocus, если объектов несколько?

[nastya97core]

Здравствуйте. Есть вот такое на jquery

$(".form-input").focus(function() {
  $(this).siblings('label').addClass('active');
});
$(".form-input").focusout(function() {
  if ($(this).val() != false) {
    $(this).siblings('label').addClass('active');
  } else {
    $(this).siblings('label').removeClass('active');
  }
});

Оно работает, как часы, но мне надо на чистом JavaScript. Я написала это, но оно работает только с первым элементом. Form-input у меня несколько.

function q(e){return document.querySelector(e);}
q(".form-input").onfocus = function() {
	this.nextElementSibling.classList.add("active");
};

q(".form-input").onblur = function() {
	if (this.value != false) {
		this.nextElementSibling.classList.add("active");
	} else {
		this.nextElementSibling.classList.remove("active");
	}
};

подскажите, как сделать, чтобы класс добавлялся ко всем нажимаемым элементам

[voraa]

document.querySelectorAll(".form-input").forEach(
	el => { el.onfocus = function() {
					this.nextElementSibling.classList.add("active");
				};
				
			el.onblur = function() {
				if (this.value != false) {
					this.nextElementSibling.classList.add("active");
				} else {
					this.nextElementSibling.classList.remove("active");
				}
			}

		}
);

[laimas]

voraa, а если 7-11 заменить на classList.toggle ?

[voraa]

voraa, а если 7-11 заменить на classList.toggle ?

И что в этом хорошего?
Там же добавление/удаление класса у следующего элемента идет не в зависимости от его наличия, а в зависимости от значения текущего элемента.

[рони]

И что в этом хорошего?

наличие параметра Boolean

[laimas]

Там же добавление/удаление класса у следующего элемента идет

Так 7-11, это как раз и есть "механизм" toggle

[voraa]

Так 7-11, это как раз и есть "механизм" toggle

Забыл про эту возможность, т.к. никогда ей не пользовался (и не буду)
По мне toggle должна делать toggle, а для add и remove есть другие функции.
Так код понятнее

[laimas]

Так код понятнее

А что непонятного в случае toggle, если знать ее возможности? Это как ну его нафик for, я буду так:

a += b + c
a += b + c
a += b + c
....

сколько нужно, это понятнее.

[voraa]

Есть функция функция appendChild(node), а чего бы ей не прикрутили еще один параметр, что бы она могла удалять элемент?
а.appendChild(b) - добавляет элемент
а.appendChild(b, false) - удаляет элемент
Удобно же.

[laimas]

Удобно, только имя функции в данном случае иное было бы как минимум.

Не всегда используют тернарный оператор тоже ссылаясь на "непонятки". А чего в нем непонятного, все просто и лаконично.

Это уже привередливость, а не доводы. А если не хочется и ладно, но ведь и борщ не обязательно любят все, но это не значит, что он как блюдо не имеет право на существование.