javascript - 如果输入字段为空，则禁用发送按钮

Question

我想实现一个检查功能，检查输入字段是否为空 - 如果为空，则应禁用发送按钮。我使用了 addEventListener 方法。

当我调试它时，else 语句正在触发，但它返回 true，我不知道为什么。

这是代码：

//all the form fields saved as variables
const form = document.getElementById("form");
const name = document.getElementById("name");
const email = document.getElementById("email");
const text = document.getElementById("text");
const button = document.getElementById("button");




form.addEventListener("change", buttoActivationCheck());
  





//custom functions

function buttoActivationCheck() {
  const nameValueForButton = name.value.trim();
  const textValueForButton = text.value.trim();
  const emailValueForButton = email.value.trim();

  if (nameValueForButton === "") {
    button.disabled = true;
  }
  if (emailValueForButton === "") {
    button.disabled = true;
  }

  if (textValueForButton === "") {
  button.disabled = true;
  }
  
  else {
    
    button.disabled = false;
  }
}

标签： javascript

Answer 1

可能你根本不需要else。

function buttoActivationCheck() {
  const nameValueForButton = name.value.trim();
  const textValueForButton = text.value.trim();
  const emailValueForButton = email.value.trim();

  button.disabled = false;

  if (nameValueForButton  === "" || 
      emailValueForButton === "" || 
      textValueForButton  === "") button.disabled = true;
}

要不就：

function buttoActivationCheck() {
  button.disabled = !Boolean(name.value.trim() && text.value.trim() && email.value.trim());
}

如果每个值都为真，则按钮为假。