Нужно в JS чтобы введенные слова в input вывелись в H2 через отложенное время (объяснить)

Учусь JS гдето 2 недели+-. В одном из скаченных курсов есть задание:

Цель задания

• Получить практику создания DOM-элементов из JavaScript. • Научиться работать с отложенными вызовами функций.

Задание

Из JavaScript создайте страницу с полем для ввода и пустым h2-элементом. Введённый в поле текст должен отображаться внутри h2-элемента, но с задержкой в 300 мс. При этом каждый введённый пользователем в поле символ сбрасывает предыдущий отложенный вызов и запускает новый. Таким образом программа должна ожидать завершения ввода пользователя и только после этого изменять текст в h2.

Проверка результата

По ходу ввода текста содержимое в h2 не изменяется. Содержимое обновляется через 300 мс после завершения ввода.

Критерии оценки

Код должен быть простым и понятным, без ненужных усложнений и лишних сущностей. В setTimeout первым параметром передаётся функция (НЕ строка с кодом). Рекомендации к выполнению

В JavaScript есть специальный механизм, позволяющий запускать произвольную функцию с указанной задержкой. Для этого есть 2 функции:

• setTimeout для запуска функции с задержкой. Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout. Важно! Хоть функция и позволяет это делать, никогда не передавайте первым параметром строку с кодом! Только функцию. Код должен быть кодом, а не строкой - так его гораздо проще контролировать.

• clearTimeout для отмены запуска. Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout. Не бойтесь вызывать clearTimeout даже если не уверены, что запуск функции с задержкой запланирован. В таком случае не будет ошибки, просто ничего не произойдёт.

Мои проблемы: Сам вывод у меня работал в H2 до того как начал заморачиваться проблемой отложенного вывода. Вывод в коде ниже не работает. Функция отложить тоже не срабатывает. Выводит ошибку в браузере:

VM105:19 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at <anonymous>:19:12

Подскажите пжлста, где не так в этом коде?

Мой код:

let input = document.createElement('input');        //создаем инпут
input.id = 'input';                                  //id у инпута инпут
document.body.append(input);                        // пихаем инпут в боди
let h2 = document.createElement('h2');                //создаем h2
h2.id = "values";                                   //id у инпута вэльюс
document.body.append(h2);                            //пихаем h2 в body
const inputS = document.getElementById(input);         //находим инпут
const log2 = document.getElementById(values);              //находим h2

function updateValue() {                           //выполняем скрипт когда что то ввели
  timeoutID = setTimeout(getTimeOut3, 2000);       //ждем 2секунды
};

function getTimeOut3(e) {                            // функция с атрибутом е, зачем он нужен. хз.....  
  let ec = e.target.value;                            //в переменную е (непонятно) таргет (непонятно) валуе (непонятно), но работает
  log2.textContent = ec;                       //в h2 вписываем то что было в новой прееменной                                                      
};

inputS.addEventListener('input', updateValue);        //событие у инпута при вводе ссылка на функцию

Для тех кто гуглит, вот рабочий вариант кода с комментариями:

            let input = document.createElement('input');        //создаем инпут
    input.id = 'input';                                  //id у инпута инпут
    document.body.append(input);                        // пихаем инпут в боди
    let h2 = document.createElement('h2');                //создаем h2
    h2.id = "values";                                   //id у инпута вэльюс
    document.body.append(h2);                            //пихаем h2 в body
    const inputS = document.getElementById('input');         //находим инпут
    const log2 = document.getElementById('values');              //находим h2
    
    function updateValue() {                           //выполняем скрипт когда что то ввели
    let  timeoutID = setTimeout(getTimeOut3, 300);       //ждем 300 милисекунд чтобы выполнить другой скрипт
    };

    function getTimeOut3() {                            //внутри тега h2 записываем занечения input
          log2.innerHTML = inputS.value                                                                                      
    };

    inputS.addEventListener('input', updateValue);        //событие у инпута при вводе ссылка на функцию
   

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