Як додати кнопку, щоб при її натисканні відбувалося додавання чисел (HTML/JS)

У рубриці FAQ я спробую відповісти на запитання одного з користувачів, який написав мені в Телеграм.

Людина написала повідомлення наступного змісту:

Добрий день. Як зробити кнопку, при натисканні якої, припустимо, додаватиметься певне число? Допоможіть будь ласка у HTML.

Відразу скажу, що використовуючи лише HTML, реалізувати потрібне, у нас не вийде з однієї простої причини. HTML – це мова розмітки веб-документа. З її допомогою ми розміщуємо на сторінці текст, кнопки, різні блоки, поля для введення тексту та інші елементи. А ось для того, щоб реалізувати якусь взаємодію на сайті (або на певній веб-сторінці) нам знадобиться програмування. Тобто потрібно використовувати якусь мову програмування. Наприклад, JavaScript або PHP. І я вибираю Javascript для вирішення поставленого завдання.

Як ми будемо вирішувати завдання

Давайте розглянемо 3 приклади, як зробити щоб при натисканні на кнопку додавалось якесь число до вже наявного, і звичайно ж, щоб результат виводився на екран.

Приклад 1 буде полягати в наступному:

  1. Створимо три текстові поля та кнопку.
  2. Користувач повинен буде самостійно ввести цифри у поле №1 та поле №2
  3. Після натискання на кнопку, у полі №3 виводитиметься результат складання цифр, зазначених у полі №1 та полі №2.

Приклад 2 буде полягати в наступному:

  1. Створимо два текстові поля та кнопку.
  2. Користувач повинен буде самостійно ввести цифри у полі №1.
  3. Після натискання на кнопку, в полі №2 буде виводитися результат складання цифри 1 та цифри, яка вказана в полі №1.

Тобто у нас буде регулярно додаватися лише 1 (одиниця) до того числа, яке користувач введе в поле.

Приклад 3 полягає в наступному:

  1. Створимо поле, у якому за замовчуванням буде вказано цифру 0 та кнопку.
  2. При натисканні на кнопку цифра вказана в полі збільшуватиметься на 1.

Таким чином ми дізнаємося, скільки разів користувач клікнув по кнопці.

Розглянувши всі три приклади, я думаю, ви отримаєте повну відповідь на своє запитання. І навчіться:

  1. Викликати функцію JS при натисканні на кнопку.
  2. Отримувати значення value текстового поля.
  3. Змінювати значення value текстового поля.
  4. Проводити прості математичні операції в JS.

Приклад коду

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Додавання (складання) цифр при натисканні кнопки</title>
</head>
<body>
    <form>
        <p><input type="text" id="A"></p>
        <p><input type="text" id="B"></p>
        <p><input type="text" id="solve"></p>
        <p><input type="button" value="Скласти" onclick="printSolve()"></p>
    </form>
    <hr>
    <form>
        <p><input type="text" id="C"></p>
        <p><input type="text" id="plus_one"></p>
        <p><input type="button" value="Додати 1" onclick="printPlusOne()"></p>
    </form>
    <hr>
    <form>
        <p><input type="text" id="E" value="0"></p>
        <p><input type="button" value="Збільшити на 1" onclick="printIncrease()"></p>
    </form>
    
    <script>
        let a = document.getElementById("A");
        let b = document.getElementById("B");

        function printSolve() {
            summa = parseInt(a.value) + parseInt(b.value);
            document.getElementById("solve").value = summa;

        }
    </script>

    <script>
        let c = document.getElementById("C");

        function printPlusOne() {
            summa = parseInt(c.value) + 1;
            document.getElementById("plus_one").value = summa;

        }
    </script>

    <script>
        let e = document.getElementById("E");

        function printIncrease() {
            summa = parseInt(e.value) + 1;
            document.getElementById("E").value = summa;

        }
    </script>

</body>
</html>

Переглянути результат

Відео

Main Menu