В рубрике 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="ru">
<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>
Угостить автора чашечкой кофе