0

Делаю 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>

6
  • Не очень понятен вопрос: "последующие разы" - это какие разы? Сделайте воспроизводимый пример в спиппете (сейчас Ваш код выдаёт ошибки) 17 авг 2021 в 11:16
  • Посмотрите, пожалуйста, полный пример codepen.io/victorbej/pen/qBmGyWG
    – Victor
    17 авг 2021 в 11:45
  • formInput.value.length < 0 вместо нуля, напишите 1, либо сделайте == 0. Должно помочь. 17 авг 2021 в 11:53
  • Еще можно сократить до formButton.disabled = !formInput.value.length 17 авг 2021 в 11:56
  • Если Вы имеете в виду, что после постановки одной задачи кнопка не блокируется снова, то надо просто добавить formButton.disabled = true; в конец функции addTodo 17 авг 2021 в 12:16

1 ответ 1

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>

3
  • К сожалению не помогло, возникает такая же проблема codepen.io/victorbej/pen/qBmGyWG
    – Victor
    17 авг 2021 в 11:43
  • Дополнил, чтобы было понятней. В вашей ф-ии addTodo, после выполнения, нужно кнопку тоже делать disabled (сейчас вы этого не делаете), т.к. эвент oninput проверяет значение поля и меняет состояние кнопки ТОЛЬКО при вводе с клавиатуры.
    – xydope
    17 авг 2021 в 12:18
  • Благодарю, заработало
    – Victor
    17 авг 2021 в 12:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.