JavaScript: изменение текста кнопки по клику

Быстрый ответ

Для того чтобы моментально изменить текст кнопки, применяйте JavaScript. Это можно сделать с помощью кода document.getElementById('buttonId').innerText = 'Новый текст';, где 'buttonId' — это идентификатор вашей кнопки, а 'Новый текст' — текст, который вы хотите увидеть на кнопке.

document.getElementById('buttonId').innerText = 'Новый текст';

Глубже знакомство с темой

Вы можете работать как с кнопками <input type="button">, так и с использованием тега <button>. Несмотря на их визуальное различие, подход к управлению этими элементами почти идентичен.

Применяйте подходящие свойства

• Свойство value подходит для кнопок типа input;
• textContent или innerText применяются для элементов button.

Если у вас кнопка типа input:

// Дайте вашей кнопке новое значение 😉
document.querySelector('#myInputButton').value = 'Нажми меня';

А если кнопка с тегом button:

// Ведь каждая кнопка мечтает быть нажатой...
document.querySelector('#myButton').textContent = 'Жми сюда';

Подробнее об этом расскажет наш спикер на видео

Обеспечьте безопасность и увеличьте производительность

• Используйте textContent вместо innerText для улучшения производительности и избежания перерисовки страницы (reflow);
• Старайтесь избегать innerHTML из-за безопасностных рисков, например, из-за возможной уязвимости XSS (Cross-Site Scripting).

Обработка событий

Можно добавить обработчик событий к кнопке, чтобы менять текст во время взаимодействия пользователя с элементом:

// Мы вступаем в новую эру именования кнопок, друзья.
document.getElementById('toggleButton').addEventListener('click', function() {
    this.textContent = this.textContent === 'Начать' ? 'Остановить' : 'Начать';
});

Визуализация

Смотрите на текст кнопки как на этикетку на банке:

До:

[🍯 Мёд]

Действие JavaScript:

// Изменения могут быть сладкими, как мёд...
document.getElementById('myButton').textContent = 'Варенье';

После:

[🍓 Варенье]

Контроль над сложными сценариями

Изменение текста кнопки в соответствии с условиями

С помощью переменной filterStatus и условных операторов можно создать функцию для переключения текста кнопки:

// Почему бы не варьировать текст на кнопке? Демонстрируйте своё мастерство в JavaScript.
function showFilterItem() {
    var button = document.getElementById('filterButton');
    var filterStatus = button.getAttribute('data-filter-status') === 'true';
    button.textContent = filterStatus ? 'Показать меньше' : 'Показать больше';
    button.setAttribute('data-filter-status', !filterStatus);
}

Соблюдайте принципы адаптивного поддержания

Для удобства отладки и простоты обслуживания кода рекомендуется хорошо структурировать ваш скрипт, а также давать понятные названия функциям и переменным.

Обеспечивайте кроссбраузерную совместимость

Регулярное тестирование в различных браузерах поможет избежать проблем с функционалом изменения текста кнопки.

Применяйте делегирование событий

В больших приложениях с множеством кнопок наиболее эффективно будет использовать делегирование событий для управления этими событиями:

// Не все герои носят плащи – некоторые из них используют делегирование событий.
document.addEventListener('click', function(e) {
    if (e.target && e.target.matches("button.toggle")) {
        e.target.textContent = e.target.textContent === 'Развернуть' ? 'Свернуть' : 'Развернуть';
    }
});

Полезные материалы

1. Метод getElementById() – Веб-API | MDN — корневой метод для выбора элементов HTML по идентификатору.
2. Свойство innerHTML – Веб-API | MDN — описание как изменить HTML-содержимое элемента.
3. JavaScript DOM HTML — основы изменения HTML с помощью JavaScript.
4. Тег HTML button — все о свойствах и поведении тега <button>.
5. Метод addEventListener() – Веб-API | MDN — информация о настройке обработчиков событий.
6. Свойство textContent – Веб-API | MDN — руководство по использованию свойства textContent для изменения текста в узле.