启用登录按钮，只要用户填写javascript中的两个字段

Question

我需要在所有输入字段输入值后立即启用提交按钮。我有两个输入字段，类型为text和类型为password，以及一个禁用的按钮(我将其类设置为"disabled")而不是使用CSS来改变颜色等)，我想在满足上述条件时删除该类。我在所有字段中添加了'change'和'input'事件监听器，如下所示:

const inputs = [...document.querySelectorAll('input[type="text"], input[type="password"]')];
const continueBtn = document.querySelector('continuebtn');
const signinForm = document.querySelector('#sign-in-form');
inputs.forEach((input) => {
input.addEventListener('input', function(e){
if (input.value !== '') {
continueBtn.classList.remove('disabled');
}else{
continueBtn.classList.add('disabled');
}
}
});

也试过e.target.value.trim() === ''

我想上面的代码应该适用于所有输入，当用户输入时检查它们是否为空，但是我不能使它工作:无论我做什么，按钮都被激活。

我需要一些帮助在纯Javascript，因为这是我目前正在学习。没有jQuery。由于

Answer 1

使用every()方法检查所有输入，而不仅仅是用户当前正在编辑的输入。

const inputs = [...document.querySelectorAll('input[type="text"], input[type="password"]')];
const continueBtn = document.querySelector('#continuebtn');
const signinForm = document.querySelector('#sign-in-form');
inputs.forEach((input) => {
input.addEventListener('input', function(e) {
if (inputs.every(input => input.value.trim())) {
continueBtn.classList.remove('disabled');
} else {
continueBtn.classList.add('disabled');
}
});
});

#continuebtn.disabled {
background-color: grey;
}

<input type="text">
<input type="password">
<button id="continuebtn" class="disabled">Continue</button>