Как сделать заблокированный button если Input пустой?

Question

[Айнур Ярулин]

Нужен скрипт, из-за которого кнопка будет disabled, если все три поля input будут пустые и наоборот, если все поля заполнены, то кнопка станет enabled. У меня получилось, но но я случайно удалил весь свой код.

Раньше мой код для одного поля выглядел примерно так, но этот код не работает:

let mail = document.querySelector("#email");
let button = document.querySelector("#button");

mail.addEventListener("#email", ButtonED);

function ButtonED(){
	if (mail.value == ""){
		button.disabled = true;
	} else {
		button.disabled = false;
	}
}
ButtonED()

Answer 1

[WapSter]

"#email"

что это за событие такое?

let mail = document.querySelector("#email");
let button = document.querySelector("#button");

mail.addEventListener("input", ButtonED);

function ButtonED(){
  if (mail.value == ""){
    button.disabled = true;
  } else {
    button.disabled = false;
  }
}
ButtonED()

Comments

[Айнур Ярулин]

Не знаю, у меня раньше всё "Input" называлось, я запутался и поменял на mail)

[WapSter]

squadbrodyaga, почему же тогда не заглянуть в документацию. Функции кстати начинаются с глагола и с маленькой буквы, а обработчики с on

[Айнур Ярулин]

WapSter, я 2 день только учусь JavaScript'у)

Answer 2

[0xD34F]

кнопка будет disabled, если все три поля input будут пустые и наоборот, если все поля заполнены, то кнопка станет enabled

А если поля заполнены, но не все - одно или два? Это получается какое-то третье состояние, которого у кнопки быть не может. Вам следует больше внимания уделять формулировкам стоящих перед вами задач. "Наоборот" для "все пустые" - это "хотя бы одно заполнено":

const button = document.querySelector('селектор кнопки');
const inputs = [...document.querySelectorAll('селектор инпутов')];
const onInput = () => button.disabled = inputs.every(n => !n.value);
inputs.forEach(n => n.addEventListener('input', onInput));
onInput();

И, аналогично, для "все заполнены" - "хотя бы одно пустое", вместо every будет some.

Comments

[Айнур Ярулин]

это полная замена моего кода?)

[0xD34F]

squadbrodyaga, я не понял, что вы сказали. Попробуйте ещё раз.

[Айнур Ярулин]

0xD34F, код ваш просто как-то странно выглядит, и он не работает

[Айнур Ярулин]

0xD34F, его нужно вставить вместо моего?

[0xD34F]

squadbrodyaga,

не работает

Конечно же работает. Просто вы не смогли правильно им воспользоваться.

его нужно вставить вместо моего?

Понятия не имею. Вы же скрыли информацию про свои "три инпута" - непонятно, как их получить. Так что сами думайте. Суть в том, что инпуты, от значений которых зависит disabled кнопки, надо в массив сложить.

[Айнур Ярулин]

ну попробую разобраться, спасибо)

[Айнур Ярулин]

0xD34F, сегодня я разобрался в вашей функции, спасибо, вы на самом деле помогли мне, благодаря вам я научился значительно сокращать свой стрёмненький код).