Если нужно, чтобы при нажатии на кнопку происходило что-то конкретное – например, менялся текст или появлялось всплывающее сообщение – начните с обработки события click. Используйте метод addEventListener и укажите функцию, которая выполнится при взаимодействии. Пример:
document.querySelector("button").addEventListener("click", function() { alert("Нажато!"); });
Следующий шаг – динамически менять содержимое. С помощью свойства textContent или innerHTML можно переписать текст в любом блоке. Это позволяет, например, показывать результат действий пользователя или скрывать элементы после отправки формы.
Чтобы реагировать на ввод текста, добавьте обработку события input для поля ввода. Так можно, например, сразу проверять длину строки или менять подсказки в реальном времени:
document.querySelector("input").addEventListener("input", function(e) { console.log(e.target.value); });
Комбинируя обработку событий с изменением структуры страницы, вы можете добавить реакции на действия пользователя без перезагрузки. Это создаёт ощущение «живого» интерфейса и ускоряет взаимодействие.
Как обрабатывать клики и действия пользователя с помощью JavaScript
Сразу добавляй обработчик событий через метод addEventListener. Это гибче, чем атрибут onclick, и не мешает другим скриптам.
Пример: реагируем на нажатие кнопки
Создай кнопку с идентификатором, например btn, и подключи обработчик:
const button = document.getElementById('btn');
button.addEventListener('click', () => {
alert('Нажата кнопка!');
});
Не забудь убедиться, что элемент существует в момент подключения скрипта. Если используешь тег <script> в <head>, оберни код в window.onload или подключи скрипт внизу страницы.
Следим за действиями пользователя
Чтобы отслеживать ввод в форму, используй событие input:
const input = document.getElementById('name');
input.addEventListener('input', (e) => {
console.log('Текущий текст:', e.target.value);
});
Для обработки перемещения мыши – mousemove. Пример: показать координаты в реальном времени:
document.addEventListener('mousemove', (e) => {
console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
});
Не вешай тяжёлые функции на часто срабатывающие события вроде scroll или mousemove без ограничения вызовов – используйте throttle или debounce.
Добавление и удаление элементов на странице через DOM-манипуляции
Сразу добавляй новый блок через document.createElement и appendChild. Например, создаёшь <li> для списка:
const item = document.createElement('li');
item.textContent = 'Новый пункт';
document.querySelector('ul').appendChild(item);Не вставляй HTML-строкой – это риск уязвимостей. Лучше использовать методы, которые работают с объектами. Так безопаснее и код читается легче.
Удаление элементов
Для удаления хватит remove() или removeChild(). Первый способ проще:
document.querySelector('li:last-child').remove();Если нужно удалить конкретный дочерний элемент, то через родителя:
const list = document.querySelector('ul');
const firstItem = list.querySelector('li');
list.removeChild(firstItem);Совет
Добавляй обработчики событий только после того, как элемент появился в DOM. Если элемент создаётся динамически – сразу прикрепляй слушатель:
const btn = document.createElement('button');
btn.textContent = 'Удалить';
btn.addEventListener('click', () => btn.remove());
document.body.appendChild(btn);Такой подход избавляет от ошибок, когда обработчик не срабатывает или вешается на несуществующий элемент.
Как создать всплывающее окно (modal) без библиотек
Сначала нужен контейнер, который будет служить фоном. Добавь в разметку:
<div id="overlay" class="hidden">
<div id="modal">
<p>Это модальное окно</p>
<button id="closeBtn">Закрыть</button>
</div>
</div>Далее – стили. Установи фиксированное позиционирование, затемнение фона и центрирование содержимого:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#modal {
background: #fff;
padding: 20px;
border-radius: 8px;
}
.hidden {
display: none;
}Открытие и закрытие
Подключи обработчики событий. Пример ниже:
const overlay = document.getElementById('overlay');
const closeBtn = document.getElementById('closeBtn');
const trigger = document.getElementById('openModal');
trigger.addEventListener('click', () => {
overlay.classList.remove('hidden');
});
closeBtn.addEventListener('click', () => {
overlay.classList.add('hidden');
});
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
overlay.classList.add('hidden');
}
});Запуск
Добавь кнопку с id=»openModal» в нужном месте. Например:
<button id="openModal">Показать окно</button>Готово. Всё работает без сторонних решений. Простая логика и минимум кода.