Первое DOM-действие без inline-обработчика

Назначение

Небольшое действие JavaScript удобно связать с нативной кнопкой через addEventListener, оставляя HTML понятным и без скрипта.

Как это работает

Кнопка уже поддерживает клавиатурную активацию. Скрипт находит её после готовности DOM, подписывается на click и выводит обычный текст через textContent, не интерпретируя строку как HTML.

Пример

const button = document.querySelector('[data-greeting]');
const output = document.querySelector('[data-result]');
if (button && output) {
  button.addEventListener('click', () => {
    output.textContent = 'Пример работает';
  });
}

Что должно получиться

После активации кнопки в указанном абзаце появляется текст. Пример требует своей HTML-разметки и запускается в учебном проекте; JavaScript в песочнице справочника отключён.

Граница применения и частая ошибка

Не назначайте обработчик элементу, который ещё не существует. И не заменяйте button на div только ради оформления: это добавит работу по фокусу и клавиатуре.

Самостоятельная проверка

Создайте кнопку data-greeting и абзац data-result в своей странице. Подключите внешний файл с defer, затем проверьте действие мышью и клавиатурой.

Связанные материалы

• Первая HTML-страница
• Публикация файлов
• Проверка перед публикацией