Калькулятор на JS: простой пример для новичка

Калькулятор на JS — хороший первый мини-проект, потому что в нем есть все базовые элементы JavaScript для страницы: поля ввода, кнопка, обработчик клика, преобразование строк в числа, условная логика и вывод результата. Мы сделаем простой калькулятор для двух чисел: сложение, вычитание, умножение и деление

Содержание

HTML-разметка
JavaScript-код
Проверка пустых значений
Проверка деления на ноль
Полезная доработка
Частые ошибки
Что почитать дальше по JavaScript
Что почитать дальше по JavaScript

HTML-разметка

Создайте файл index.html и добавьте два поля, список операций, кнопку и место для результата

<label>
  Первое число
  <input id="first" type="number">
</label>

<label>
  Операция
  <select id="operation">
    <option value="plus">+</option>
    <option value="minus">-</option>
    <option value="multiply">*</option>
    <option value="divide">/</option>
  </select>
</label>

<label>
  Второе число
  <input id="second" type="number">
</label>

<button id="calculate">Посчитать</button>
<p id="result"></p>

<script src="script.js" defer></script>

Атрибут defer нужен, чтобы скрипт выполнился после чтения HTML. Тогда элементы уже существуют, и querySelector сможет их найти

JavaScript-код

Создайте файл script.js. Сначала найдем элементы на странице

const firstInput = document.querySelector("#first");
const secondInput = document.querySelector("#second");
const operationSelect = document.querySelector("#operation");
const button = document.querySelector("#calculate");
const result = document.querySelector("#result");

Теперь добавим обработчик клика. Значения из input приходят строками, поэтому перед расчетом используем Number

button.addEventListener("click", () => {
  const first = Number(firstInput.value);
  const second = Number(secondInput.value);
  const operation = operationSelect.value;

  let answer;

  switch (operation) {
    case "plus":
      answer = first + second;
      break;
    case "minus":
      answer = first - second;
      break;
    case "multiply":
      answer = first * second;
      break;
    case "divide":
      answer = first / second;
      break;
    default:
      answer = "Неизвестная операция";
  }

  result.textContent = `Результат: ${answer}`;
});

На этом этапе калькулятор уже работает, но есть проблема: деление на ноль и пустые поля

Проверка пустых значений

Number("") превращает пустую строку в 0. Для учебного калькулятора это может запутать пользователя, поэтому лучше проверить поля до расчета

if (firstInput.value === "" || secondInput.value === "") {
  result.textContent = "Введите оба числа";
  return;
}

Этот блок нужно поставить в начало обработчика, до Number

Проверка деления на ноль

Добавим отдельную защиту для деления

if (operation === "divide" && second === 0) {
  result.textContent = "На ноль делить нельзя";
  return;
}

Теперь калькулятор не покажет Infinity, а выведет понятное сообщение

Полезная доработка

Можно вынести расчет в отдельную функцию. Так код становится чище, а логику проще проверять

function calculate(first, second, operation) {
  switch (operation) {
    case "plus":
      return first + second;
    case "minus":
      return first - second;
    case "multiply":
      return first * second;
    case "divide":
      return first / second;
    default:
      return null;
  }
}

После этого обработчик клика будет отвечать за страницу, а функция — за математику. Это хорошая привычка: отделять работу с DOM от вычислений

Частые ошибки

Первая ошибка — забыть преобразовать строки в числа. Тогда "10" + "5" даст "105", потому что JavaScript склеит строки. Вторая — подключить script.js до HTML без defer, и элементы не найдутся. Третья — не обработать пустые поля. Четвертая — не проверить деление на ноль

Мини-задача: добавьте кнопку «Очистить», которая сбрасывает оба поля и очищает результат. Затем добавьте операцию остатка от деления %. Так калькулятор станет чуть полезнее, а вы закрепите работу с select, условиями и событиями