Как сделать кнопку с помощью JavaScript

Создание кнопки веб-интерфейса обычно происходит с помощью HTML и CSS. Однако иногда может потребоваться добавить кнопку, используя JavaScript. В этой статье мы рассмотрим, как сделать кнопку JavaScript, и продемонстрируем интерактивный пример.

Описание примера

В качестве демонстрации способа создания кнопки через JavaScript будем использовать следующий пример. У нас будет панель с числовым полем для ввода возраста пользователя. Если пользователь добавляет число большее либо равное 18, появляется кнопка. В противном случае кнопка удаляется. Эта кнопка будет создана с помощью JS, и при клике по ней будет отображаться alert-сообщение «Добро пожаловать!».

Этапы создания примера:

• Верстка панели и числового поля.
• Создание и удаление кнопки через JS, в зависимости от введенного числа.
• Добавление сообщения, появляющегося после клика на кнопку.

Верстка панели и числового поля

Для начала сделаем верстку нашего примера. Создадим панель (demoButtonJs), добавим элементы для текста (demoButtonJs__text), возраста (demoButtonJs__age) и области, куда будем помещать создаваемую кнопку (demoButtonJs__enter):

<div class="demoButtonJs">
    <label for="demoButtonJsAge" class="demoButtonJs__text">
        Введите ваш возраст:
    </label>
    <input class="demoButtonJs__age" id='demoButtonJsAge' type="number" min="0" max="150">
    <div class="demoButtonJs__enter" id='demoButtonJsEnter'></div>
</div>

Также добавим CSS-стили:

.demoButtonJs {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.demoButtonJs__text {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
}

.demoButtonJs__age {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 16px;
    width: 100%;
    max-width: 100px;
    box-sizing: border-box;
    margin: 0 0 10px;
}

.demoButtonJs__enter button {
    background-color: #4CAF50;
    color: white;
    border-radius: 4px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.demoButtonJs__enter button:hover {
    background-color: #3e8e41;
}

Как сделать кнопку JavaScript

Теперь напишем главный код этой статьи — создадим кнопку с помощью JavaScript. Это сделать довольно просто:

• Мы создаем объект HTML-элемента button с помощью метода createElement() объекта document.
• Добавляем текст кнопки с помощью свойства innerHTML.
• Используя метод appendChild(), добавляем кнопку элементу-родителю.

В нашем примере код будет выглядеть следующим образом:

// Передадим строку 'button' методу createElement, чтобы создать объект элемента button
const btn = document.createElement('button');
// У объекта button вызовем свойство innerHTML и зададим текст, который будет отображаться на кнопке
btn.innerHTML = 'Входите!';
// Получим элемент с идентификатором 'demoButtonJsEnter' и добавим ему созданную кнопку
document.getElementById('demoButtonJsEnter').appendChild(btn);

Обработка события изменения числового поля

Теперь у нас есть код создания кнопки. Обернем его в функцию и добавим логику обработки события изменения числового поля:

// Получим объекты поля для указания возраста и блока для размещения кнопки
const ageField = document.getElementById('demoButtonJsAge');
const enterWrapper = document.getElementById('demoButtonJsEnter');

// Если этих элементов не существует, остановим выполнения скрипта
if (!ageField || !enterWrapper) {
    return;
}

// Повесим обработчик на событие изменения поля возраста
ageField.oninput = function () {
    // Попытаемся получить объект кнопки
    const enterBtn = enterWrapper.querySelector('button');

    // Если в поле возраста введено значение от 18 и больше и кнопки не существует, создадим эту кнопку
    if (ageField.value >= 18 && !enterBtn) {
        demoButtonJsCreateButtonIn(enterWrapper); // В функцию передадим объект области размещения кнопки
    } else if (ageField.value < 18 && enterBtn) { // При указанном возрасте меньше 18 удалим кнопку, если она размещена
        enterBtn.remove();
    }
};

// Функция создания кнопки
function demoButtonJsCreateButtonIn(enterWrapper) {
    // Создадим элемент button
    const btn = document.createElement('button');
    // Добавим ему текст
    btn.innerHTML = 'Входите!';
    // Прикрепим созданный элемент button в блок размещения кнопки
    enterWrapper.appendChild(btn);
}

Добавление обработчика события нажатия на кнопку

Наконец, добавим логику появления сообщения при нажатии на созданную кнопку. Сделаем это, немного поправив функцию demoButtonJsCreateButtonIn():

function demoButtonJsCreateButtonIn(enterWrapper) {
    const btn = document.createElement('button');
    btn.innerHTML = 'Входите!';
    // Повесим выполнение функции alert с текстом на событие нажатия на кнопку
    btn.onclick = function () {
        alert('Добро пожаловать!');
    };
    enterWrapper.appendChild(btn);
}

Финальный код

Теперь подкорректируем наш код, сделав возможным его запуск после полной загрузки страницы. Также добавим проверку на существование нужных HTML-элементов:

// Код начнет выполняться после загрузки страницы
window.addEventListener('load', function () {
    // Получим объекты поля для указания возраста и блока для размещения кнопки
    const ageField = document.getElementById('demoButtonJsAge');
    const enterWrapper = document.getElementById('demoButtonJsEnter');

    // Если этих элементов не существует, остановим выполнения скрипта
    if (!ageField || !enterWrapper) {
        return;
    }

    // Повесим обработчик на событие изменения поля возраста
    ageField.oninput = function () {
        // Попытаемся получить объект кнопки
        const enterBtn = enterWrapper.querySelector('button');

        // Если в поле возраста введено значение от 18 и больше и кнопки не существует, создадим эту кнопку
        if (ageField.value >= 18 && !enterBtn) {
            demoButtonJsCreateButtonIn(enterWrapper); // В функцию передадим объект области размещения кнопки
        } else if (ageField.value < 18 && enterBtn) { // При указанном возрасте меньше 18 удалим кнопку, если она размещена
            enterBtn.remove();
        }
    };
});

// Функция создания кнопки
function demoButtonJsCreateButtonIn(enterWrapper) {
    // Создадим элемент button
    const btn = document.createElement('button');
    // Добавим ему текст
    btn.innerHTML = 'Входите!';
    // При нажатии на кнопку появится сообщение
    btn.onclick = function () {
        alert('Добро пожаловать!');
    };
    // Прикрепим созданный элемент button в блок размещения кнопки
    enterWrapper.appendChild(btn);
}

Результат выполнения вышеописанного кода можно увидеть на следующем интерактивном примере, введя число в поле. Кнопка появится только тогда, когда вы введете число равное или большее 18:

Заключение

В этой статье вы узнали, как сделать кнопку, используя JavaScript. В некоторых случаях такой способ создания кнопки может понадобиться. Однако не стоит его применять, когда задействования HTML и CSS вполне достаточно для определенной задачи.