У веб-розробці нерідко виникає необхідність створення кнопок, які виконують певні дії після кліку на них. Іноді такі кнопки повинні змінювати свій вміст, наприклад, змінювати текст або додавати зображення після кліку. У цій статті ми розглянемо, як зробити кнопку, яка міняє свій текст та додає зображення після кліку на неї.

Для початку розглянемо, як створити базову кнопку в HTML з JavaScript-функціоналом. Найпростіший спосіб створити кнопку з клікабельним текстом — використати тег <input> з атрибутом type="button" та властивістю onclick, яка вказує на JavaScript-функцію, що буде виконуватися при кліку на кнопку.

Тепер давайте перейдемо до JavaScript-коду, який дозволить нам змінювати вміст кнопки після кліку. Для цього нам потрібно створити функцію change(), яка буде змінювати значення кнопки. Ми можемо використовувати метод getElementById(), щоб отримати доступ до кнопки за її ідентифікатором, а потім змінити значення кнопки.

Цей код змінить текст кнопки на “please wait…” при кліку на неї. Тепер давайте перейдемо до того, як додати зображення разом із текстом кнопки. Проблема полягає в тому, що ви не можете просто вставити тег <img> в якості значення кнопки, тому що значення кнопки приймає лише текст. Однак, ми можемо використовувати властивість CSS background-image для відображення зображення на кнопці. Давайте подивимося, як це зробити.

У цьому коді ми спочатку отримуємо доступ до кнопки за її ідентифікатором, як ми це робили раніше. Потім ми встановлюємо властивість backgroundImage для кнопки, вказуючи шлях до зображення, яке ми хочемо відобразити. Нарешті, ми змінюємо значення кнопки на “please wait…”. Тепер, коли ми клікаємо на кнопку, ми бачимо текст “please wait…” разом із зображенням.

З цими простими кроками ви можете легко створити кнопку, яка змінює свій текст та додає зображення після кліку на неї. Насолоджуйтеся своєю новою кнопкою з JavaScript!