Активация/деактивация кнопки при пустом/заполненом инпуте

Question

Сделал активацию/деактивацию кнопки при заполнении инпута. После каждого нажатия кнопки, поле ввода я делаю пустым, но кнопка продолжает быть активной, пока не нажму backspace. Как решить эту пробему? Я думал что проблема в том, что после нажатия кнопки поле делается пустым

phone.value = "";

и проблема здесь, но при запуске все работает. Ломается только после нажатия кнопки.

    const phone = document.getElementById('phone');
    const list = document.createElement('ul');
    document.body.append(list);


    phone.addEventListener('keydown', function (event) {
        let input = false;



        if (event.key >= 0 || event.key === "-" || event.key === "+" || event.key <=9 || event.key === "Delete" || event.key === "Backspace" || event.key === "ArrowLeft" || event.key === "ArrowRight") {
            input = true;

        }
        if (!input) {
            event.preventDefault();
        }

        if (phone.value.length > 0) {
            button.removeAttribute('disabled')
        } else {
            button.setAttribute('disabled', 'disabled');
        }
    });


    const button = document.getElementById('button');
    button.addEventListener('click', () =>  {

        const item = document.createElement('li');
        list.append(item);
        item.textContent = phone.value;
        phone.value = ""; 
        const deletebutton = document.createElement('button');
        deletebutton.textContent = "remove";
        item.append(deletebutton);
        deletebutton.addEventListener('click', () => {
            list.removeChild(item);
        });
    });

<input type = "text" id = "phone">
<button disabled id = "button">addnumber</button>

Answer 1

Мне кажется задачу можно сделать гораздо проще:

надо отслеживать ввод текста (неважно каким способом) и если ничего не введено (это возможно в случае, когда текст стёрт), то деактивировать кнопку

let phone = document.querySelector('#phone');

phone.addEventListener('input', function(event) {
  let button = document.querySelector('#button');

  button.disabled = (phone.value == '');
});

let button = document.querySelector('#button');

button.addEventListener('click', function(event) {
  let phone = document.querySelector('#phone');
  let list = document.querySelector('#list');

  if (phone.value != '')
    list.innerHTML = phone.value + '<br>' + list.innerHTML;

  phone.value = '';
  this.disabled = true
});

<input type = "text" id = "phone">
<button disabled id = "button">addnumber</button>
<div id = 'list'></div>

БЛОГ НА HUSL

Активация/деактивация кнопки при пустом/заполненом инпуте

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