Не срабатывает addEventListener

[Egoritch]

Здравствуйте, уважаемые. Прошу вашей помощи. Я - "начинающий", только учусь. И тут уже на сутки подвис. Всё должно работать, но не работает. Суть какая. Разбираюсь с WinBox.js и создается окно (winbox) в котором есть несколько input-text. И я хочу при вводе текста в один из них, получать ответ от сервера, есть ли такой логин и во втором отображать результат. Примеров много. Вот есть первый и второй (и кнопка button):

const input = document.getElementById('username');
  const resultDiv = document.getElementById('surname');
  const button = document.getElementById('myButton');

  alert("1: " + input.name);
  alert("2: " + resultDiv.name);
  alert("Button: " + button.name);

Все три алерта показываются. То есть, скрипт отрабатывается и такие объекты есть. Но дальше я вешаю обработчик на кнопку и обработчик на input:

button.addEventListener('click', function() {
		alert('Кнопка нажата!');
	});

и, соответственно, на ввод текста:

input.addEventListener('input', function(event) {
	  alert("777");
  });

Так вот на нажатие на конку alert есть, а на ввод текста - просто никакого нет. Это я удалил код оттуда, там всё стандартно. Оба input - простые стандартные:

<input type="text" id="username" name="username" autocomplete="username">
<input type="text" id="surname" name="surname">

Почему на работает Listener на ввод текста? Что может быть? Заранее благодарен вам за помощь.

[Egoritch]

Закрываем тему. ChatGPT помог.

Вот! ������ Тогда мы уже точно локализовали проблему.

Ваш input сам по себе исправен. Проблема в том, что обработчик, повешенный непосредственно на элемент:

input.addEventListener('input', ...)

не получает событие в вашей конструкции с WinBox, а событие всплывает до document.

Поэтому делегирование:

document.addEventListener('input', function(event) {
    if (event.target.id === 'username') {
        alert('777');
    }
});

работает.

Всем, кто думал, как помочь - большое спасибо!