Simple calculator JavaScript: простой калькулятор на JS, HTM

Сделаем простой калькулятор на JavaScript: два числа, выбор операции, кнопка и вывод результата на странице. Такой проект хорош для новичка, потому что в нем сразу есть HTML, события, получение значения из input, условная логика и вывод результата

Создайте три файла:

calculator/
  index.html
  style.css
  script.js

Содержание

HTML-разметка
Немного CSS
JavaScript-код
Почему нужен Number
Частые ошибки
Скрипт не подключен
Получается 105 вместо 15
Деление на ноль показывает Infinity
Версия с проверкой пустых полей
Как вынести расчет в функцию
Мини-задание
Как улучшить калькулятор
Что почитать дальше по JavaScript

HTML-разметка

Файл index.html:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Калькулятор на JS</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <main class="calculator">
    <h1>Калькулятор</h1>

    <input id="first" type="number" placeholder="Первое число">
    <input id="second" type="number" placeholder="Второе число">

    <select id="operation">
      <option value="plus">+</option>
      <option value="minus">-</option>
      <option value="multiply">*</option>
      <option value="divide">/</option>
    </select>

    <button id="calculate">Посчитать</button>
    <p id="result">Результат появится здесь</p>
  </main>
</body>
</html>

Немного CSS

Файл style.css:

body {
  font-family: Arial, sans-serif;
  padding: 30px;
}

.calculator {
  max-width: 320px;
}

input,
select,
button {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 10px;
  box-sizing: border-box;
}

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");

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":
      if (second === 0) {
        result.textContent = "На ноль делить нельзя";
        return;
      }
      answer = first / second;
      break;
  }

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

Откройте index.html в браузере, введите 10 и 5, выберите + и нажмите кнопку. Должно появиться:

Результат: 15

Почему нужен Number

Значение из input приходит как строка. Если сложить строки, получится склейка:

"10" + "5" // "105"

Поэтому перед расчетом мы пишем:

const first = Number(firstInput.value);

Так "10" превращается в число 10

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

Скрипт не подключен

Проверьте строку:

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

Файл script.js должен лежать рядом с index.html

Получается 105 вместо 15

Вы забыли преобразовать строки в числа через Number

Деление на ноль показывает Infinity

JavaScript может вернуть Infinity. Для учебного калькулятора лучше отдельно проверить second === 0 и вывести понятное сообщение

Версия с проверкой пустых полей

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

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

  const first = Number(firstInput.value);
  const second = Number(secondInput.value);

  if (Number.isNaN(first) || Number.isNaN(second)) {
    result.textContent = "Можно вводить только числа";
    return;
  }

  result.textContent = `Сумма: ${first + second}`;
});

Это не полный калькулятор со всеми операциями, а отдельный пример проверки ввода. Его можно встроить в основной код перед switch

Как вынести расчет в функцию

Когда код растет, расчет лучше вынести отдельно:

function calculate(first, second, operation) {
  switch (operation) {
    case "plus":
      return first + second;
    case "minus":
      return first - second;
    case "multiply":
      return first * second;
    case "divide":
      if (second === 0) {
        return "На ноль делить нельзя";
      }
      return first / second;
    default:
      return "Неизвестная операция";
  }
}

Тогда обработчик клика отвечает за страницу, а функция calculate отвечает только за математику. Это важный шаг от игрушечного примера к нормальному коду

Мини-задание

Добавьте операцию возведения в степень:

<option value="power">^</option>

И новый пункт в switch:

case "power":
  answer = first ** second;
  break;

Проверьте на примере 2 и 3. Результат должен быть 8

Как улучшить калькулятор

Добавьте:

кнопку очистки;
округление результата;
историю операций;
запрет расчета при пустых полях;
стили для ошибки.

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

Simple calculator JavaScript: простой калькулятор на JS, HTML и CSS