主页 / 问题 / 1417351
Accepted
realHikkan
Asked:2022-08-06 05:47:43 +0000 UTC2022-08-06 05:47:43 +0000 UTC

设置禁用状态按钮的脚本不起作用

  • 772

我正在尝试为某些字段未填写在表单中的事件设置button状态disabled，但由于某种原因脚本不起作用

let userName = document.getElementById("name");
let userEmail = document.getElementById("email");
let button = document.getElementById("send");

function checkForm() {
  if (userName === false || userEmail === false) {
    button.disabled = true;
  } else {
    button.disabled = false;
  }
}

checkForm();
form {
  display: flex;
  flex-direction: column;
  width: 200px;
}

input,
select {
  margin-bottom: 10px;
}
<form action="/">
  <input type="text" placeholder="Ваше имя" id="name">
  <input type="text" placeholder="Эл. почта" id="email">
  <select name="city">
    <option selected disabled>Выберите город</option>
    <option value="Москва">Москва</option>
    <option value="Санкт-Петербург">Санкт-Петербург</option>
    <option value="Екатеринбург">Екатеринбург</option>
    <option value="Новосибирск">Новосибирск</option>
  </select>
  <button id="send">Отправить</button>
</form>

javascript html

1 个回答

  1. Best Answer

    首先，您将输入与false进行比较，但您需要比较输入的值

    其次，文本输入的值不能是布尔值，如果为空，那么只有一个空字符串

    第三，如果你真的想与 比较false，那么你应该使用普通比较==而不是严格比较===。但我不建议你这样做。

    编码：

    const userName = document.getElementById('name');
const userEmail = document.getElementById('email');
const button = document.getElementById('send');

function checkForm() {
 button.disabled = userName.value === '' || userEmail.value === '';
}

checkForm();
    form {
  display: flex;
  flex-direction: column;
  width: 200px;
}

input,
select {
  margin-bottom: 10px;
}
    <form action="/">
  <input type="text" placeholder="Ваше имя" id="name">
  <input type="text" placeholder="Эл. почта" id="email">
  <select name="city">
    <option selected disabled>Выберите город</option>
    <option value="Москва">Москва</option>
    <option value="Санкт-Петербург">Санкт-Петербург</option>
    <option value="Екатеринбург">Екатеринбург</option>
    <option value="Новосибирск">Новосибирск</option>
  </select>
  <button id="send">Отправить</button>
</form>

    • 2

相关问题