Как сделать поле неактивным на всех этапах ввода данных

Question

Делаю ToDo лист и застрял на одной доработке - нужно сделать так, что если текстовое поле пустое, нельзя нажать на кнопку "Добавить". Пытался сделать с formButton.disabled = true, но почему-то это срабатывает только при первом клике на кнопку, последующие разы добавить можно и пустое поле. Подскажите, как исправить?

formInput.addEventListener('input', function () {
    if (formInput.value.length > 0) {
        formButton.disabled = false;
    } else if (formInput.value.length < 0) {
        formButton.disabled = true;
    }
})

<form>
            <input type="text" class="form-input" placeholder="Your Task">
            <button type="submit" class="form-button" disabled>
                <i class="far fa-plus-square"></i>
            </button>
<form>

Answer 1

const formInput = document.querySelector('.form-input')
const formButton = document.querySelector('.form-button')
const todo = document.querySelector('.todo')

formInput.oninput = ({target}) => {
  const isNeedEnable = formButton.disabled && formInput.value.length > 0
  const isNeedDisable = !formButton.disabled && formInput.value.length == 0

  if (isNeedEnable || isNeedDisable) {
    formButton.disabled = !formButton.disabled
  }
}

formButton.onclick = (event) => {
  event.preventDefault() //отключаем onsubmit
  createTodoItem(formInput.value)
  //После добавления нужно очистить поле ввода и отключить кнопку.
  formInput.value = ""
  formButton.disabled = true;
}

createTodoItem = (value) => {
  const item = document.createElement('li');
  item.classList.add('todo-item')
  item.textContent = value;
  todo.appendChild(item)
}

<form class="form">
  <input type="text" class="form-input" placeholder="Your Task">
  <button type="submit" class="form-button" disabled>
    <i class="far fa-plus-square">add</i>
  </button>
<form>

<ol class="todo">
<ol>

БЛОГ НА HUSL

Как сделать поле неактивным на всех этапах ввода данных

Ответы (1 шт):