Сложение двух чисел на HTML + javaScript

В статье рассказывается как создать приложение сложения двух чисел на HTML + javaScript.

Статья из цикла «Сложение двух чисел». Для меня минимальное освоение любой системы программирования начинается с возможности создания такой программы. Если можно написать приложение, в которой пользователь может ввести два числа, считать их, провести с ними какие-то действия, а потом вывести результат, то, значит, базовое владение имеется. И много задач именно из области программирования, алгоритмики можно будет решать, зная, как в конкретной системе программирования запрограммировать такую программу.

Демо

Приготовления

Ничего не требуется кроме блокнота и браузера.

Создание болванки

Создаем текстовой документ под именем index.html.

Закинем в него простую болванку HTML5 документа:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Программа сложения двух чисел</title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>Программа сложения двух чисел</title>

</head>

<body>

</body>

</html>

Если мы сохраним документ и откроем в браузере, то увидим пустое белое окно, так как ничего видимого в документе пока нет – это просто болванка с шапкой, где располагаются некоторые мета-тэги (по сути их тоже можно было выкинуть), и пустое тело.

Наполнение HTML

Так как нам нужно приложение, которое будет складывать два числа, то нужно два поля ввода текстовой информации. Следовательно, их нужно будет размещать в некоторой форме. Поэтому в теле HTML документа <body></body> разместим такую форму.

<form>
	<input id="a" type="text" value="1"><br>
	<input id="b" type="text" value="1"><br>
</form>

<form>

</form>

Каждое поле имеет свой идентификатор id с названием переменной a и b. Также они имеют начальное наполнение.

Нам нужна кнопка для вычислений. Обычно на форме используется input тэг с type=submit, но он вызовет передачу параметров в форме с переходом на эту же или другую страницу. Поэтому используем обычную кнопку.

<input type="button" value="Сложить 2 два числа" onclick="addition();"><br>

1	<input type="button" value="Сложить 2 два числа" onclick="addition();"><br>

При клике на кнопку будет вызываться функция javascript по имени addition(), которую позже пропишем.

Кроме этого, нам нужно место, куда javascript будет записывать результат вычислений. Для этого после формы пропишем пустой слой с определенным идентификатором id=”result”:

<div id="result"></div>

1	<div id="result"></div>

Общий документ будет иметь вид:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Программа сложения двух чисел</title>
	</head>
	<body>
		<form>
			<input id="a" type="text" value="1"><br>
			<input id="b" type="text" value="1"><br>
			<input type="button" value="Сложить 2 два числа" onclick="addition();"><br>
		</form>
		<div id="result"></div>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>Программа сложения двух чисел</title>

</head>

<body>

<form>

</form>

</body>

</html>

Если мы сохраним документ и его откроем, то получим следующее:

Функция javaScript

Теперь пропишем функцию addition(). Для этого пропишем к голове страницы пока пустую функцию внутри тэга script.

<script>
function addition() {
}
</script>

function addition() {

}

</script>

Общий вид документа будет иметь вид:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Программа сложения двух чисел</title>

		<script>
		function addition() {
		}
		</script>
	</head>
	<body>
		<form>
			<input id="a" type="text" value="1"><br>
			<input id="b" type="text" value="1"><br>
			<input type="button" value="Сложить 2 два числа" onclick="addition();"><br>
		</form>
	<div id="result"></div>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>Программа сложения двух чисел</title>

function addition() {

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Что нам нужно в этой функции. Вначале нам нужно найти соответствующие поля ввода текстовой информации и считать те значения, которые там записаны. Поиск элементов будем осуществлять с помощью функции getElementById().

При этом сразу переведем значения из строкового типа в числовые целого типа:

var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);

1 2	var a = parseInt(document.getElementById('a').value); var b = parseInt(document.getElementById('b').value);

Теперь в переменных a и b хранятся значения в виде чисел. А, если там вообще ничего не будет в поле ввода? Тогда там будет хранится NaN значение. Нам это не нужно. Поставим проверку, что? если в поле ввода ничего нет, то пусть там будет как будто записан ноль:

if (isNaN(a)==true) a=0;
if (isNaN(b)==true) b=0;

1 2	if (isNaN(a)==true) a=0; if (isNaN(b)==true) b=0;

Теперь мы можем провести наши вычисления:

var c = a + b;

1	var c = a + b;

Осталось только записать полученный результат. Для этого найдем наш пустой слой с id=”result” и заменим его содержимое на то, что нам нужно, через свойство innerHTML.

document.getElementById('result').innerHTML = a + " + " + b + " = " + c;

1	document.getElementById('result').innerHTML = a + " + " + b + " = " + c;

Итого, наш файл будет иметь вид:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Программа сложения двух чисел</title>

		<script>
		function addition() {
			var a = parseInt(document.getElementById('a').value);
			var b = parseInt(document.getElementById('b').value);

			if (isNaN(a)==true) a=0;
			if (isNaN(b)==true) b=0;

			var c = a + b;

			document.getElementById('result').innerHTML = a + " + " + b + " = " + c;
		}
		</script>
	</head>
	<body>
		<form>
			<input id="a" type="text" value="1"><br>
			<input id="b" type="text" value="1"><br>
			<input type="button" value="Сложить 2 два числа" onclick="addition();"><br>
		</form>
	<div id="result"></div>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>Программа сложения двух чисел</title>

function addition() {

var a = parseInt(document.getElementById('a').value);

var b = parseInt(document.getElementById('b').value);

if (isNaN(a)==true) a=0;

if (isNaN(b)==true) b=0;

var c = a + b;

document.getElementById('result').innerHTML = a + " + " + b + " = " + c;

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Если сохраним файл, запустим его, и нажмем на кнопку, то получим следующее:

Вот и всё) Программа написана.

Vladimir

К сожалению не работает с большими числами. Как это исправить?
- Harrix
  
  Это не ошибка. Каждая переменная хранится в памяти компьютера в виде двоичного числа фиксированной длины. То есть размеры чисел ограничены. В Javascript числа всегда 64 битные. Это значит, что количество значимых цифр ограничено, что и проявилось в вашем примере. То есть 64 бит не хватит, чтобы в таких больших числах запомнить разницу в 1. А вот если вы умножите на 2, то разницу увидите.
  
  Прочитайте тут информацию: http://www.w3schools.com/js/js_numbers.asp
  Тут можно прочитать теорию о значимых числах: https://habrahabr.ru/post/112953/
  
  Если вам всё-таки нужны по каким-то причинам вычисления с такими огромными величинами, то тут нужно использовать «длинную арифметику». Грубо говоря, там каждое число представляется массивом его цифр. Для этого есть свои библиотеки.
Максим

Спасибо за статью! Очень помогла.
Максим

Подскажите как можно сложить чекбоксы? сейчас они считаются даже если не отмечены(
Елдар Кутпанов

Спасибо за пример, я еще новичек в JS, никак не мог понять как брать значения с HTML)
Metall Vitaliy

а если без нажатия кнопки "Сложить 2 числа", как сделать что бы скрипт суммировал автоматически при появлении данных в полях "a" и "b"?

Сложение двух чисел на HTML + javaScript

Содержание

Приготовления

Создание болванки

Наполнение HTML

Функция javaScript

Статьи по теме: