У рубриці FAQ я спробую відповісти на запитання одного з користувачів, який написав мені в Телеграм.
Людина написала повідомлення наступного змісту:
Добрий день. Як зробити кнопку, при натисканні якої, припустимо, додаватиметься певне число? Допоможіть будь ласка у HTML.
Відразу скажу, що використовуючи лише HTML, реалізувати потрібне, у нас не вийде з однієї простої причини. HTML – це мова розмітки веб-документа. З її допомогою ми розміщуємо на сторінці текст, кнопки, різні блоки, поля для введення тексту та інші елементи. А ось для того, щоб реалізувати якусь взаємодію на сайті (або на певній веб-сторінці) нам знадобиться програмування. Тобто потрібно використовувати якусь мову програмування. Наприклад, JavaScript або PHP. І я вибираю Javascript для вирішення поставленого завдання.
Як ми будемо вирішувати завдання
Давайте розглянемо 3 приклади, як зробити щоб при натисканні на кнопку додавалось якесь число до вже наявного, і звичайно ж, щоб результат виводився на екран.
Приклад 1 буде полягати в наступному:
- Створимо три текстові поля та кнопку.
- Користувач повинен буде самостійно ввести цифри у поле №1 та поле №2
- Після натискання на кнопку, у полі №3 виводитиметься результат складання цифр, зазначених у полі №1 та полі №2.
Приклад 2 буде полягати в наступному:
- Створимо два текстові поля та кнопку.
- Користувач повинен буде самостійно ввести цифри у полі №1.
- Після натискання на кнопку, в полі №2 буде виводитися результат складання цифри 1 та цифри, яка вказана в полі №1.
Тобто у нас буде регулярно додаватися лише 1 (одиниця) до того числа, яке користувач введе в поле.
Приклад 3 полягає в наступному:
- Створимо поле, у якому за замовчуванням буде вказано цифру 0 та кнопку.
- При натисканні на кнопку цифра вказана в полі збільшуватиметься на 1.
Таким чином ми дізнаємося, скільки разів користувач клікнув по кнопці.
Розглянувши всі три приклади, я думаю, ви отримаєте повну відповідь на своє запитання. І навчіться:
- Викликати функцію JS при натисканні на кнопку.
- Отримувати значення value текстового поля.
- Змінювати значення value текстового поля.
- Проводити прості математичні операції в 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>
Переглянути результат