Нужно в 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); //событие у инпута при вводе ссылка на функцию