Создание простого калькулятора

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

Опубликовано 03.03.2025
Просмотры 6
Автор
Рек. время прохождения 5 минут
Упражнений 7
Комментарии 0
Тренажер JavaScript: Покоряем HTML DOM

Эта серия упражнений поможет вам отточить навыки взаимодействия с HTML-документом с помощью JavaScript. Вы будете работать с готовой HTML-структурой простого калькулятора. Задачи включают получение элементов со страницы, чтение значений из полей ввода, добавление обработчиков событий на кнопки, выполнение арифметических операций и отображение результата обратно на странице. Упражнения расположены по возрастанию сложности: от выбора элементов до реализации полной логики калькулятора с базовой обработкой ошибок.

Список тем

Получение элементов калькулятора

Ваша первая задача — получить доступ к основным элементам калькулятора на HTML-странице с помощью их идентификаторов (ID). Вам нужно получить ссылки на два поля ввода для чисел и на элемент, где будет отображаться результат.

HTML
Восстановить HTML
<div class="calculator">
  <input type="number" id="num1" placeholder="Первое число">
  <input type="number" id="num2" placeholder="Второе число">
  <button id="add">+</button>
  <p>Результат: <span id="result">?</span></p>
</div>
JavaScript
// Получаем первое поле ввода
const num1Input = document.input__1('num1');

// Получаем второе поле ввода
const num2Input = document.input__2('num2');

// Получаем элемент для вывода результата
const resultSpan = document.getElementById(input__3);

// Для проверки (не изменять)
console.log('Найденные элементы:', num1Input, num2Input, resultSpan);
Используйте метод `document.getElementById('ID_ЭЛЕМЕНТА')`, чтобы получить ссылку на HTML-элемент по его уникальному идентификатору. Вам нужно сделать это для полей с ID 'num1', 'num2' и для элемента с ID 'result'.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Чтение значений из полей ввода

Теперь, когда у вас есть ссылки на элементы, научимся читать значения, которые пользователь вводит в поля. Дополните код так, чтобы при клике на кнопку '+' значения из полей ввода считывались и выводились в консоль.

HTML
Восстановить HTML
<div class="calculator">
  <input type="number" id="num1" placeholder="Первое число" value="10">
  <input type="number" id="num2" placeholder="Второе число" value="5">
  <button id="add">+</button>
  <p>Результат: <span id="result">?</span></p>
</div>
JavaScript
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const addButton = document.input__1('add');
const resultSpan = document.getElementById('result');

addButton.input__2('click', function() {
  // Получаем значение из первого поля
  const value1 = num1Input.input__3;
  // Получаем значение из второго поля
  const value2 = num2Input.input__4;

  // Выводим значения в консоль для проверки
  console.log('Значение 1:', value1);
  console.log('Значение 2:', value2);

  // Пока не выводим результат на страницу
  // resultSpan.textContent = ...;
});
Чтобы получить значение из поля ввода (input), используйте свойство `.value`. Помните, что значения из полей ввода всегда считываются как строки. Для выполнения математических операций их нужно будет преобразовать в числа, например, с помощью `parseFloat()` или `parseInt()`. Чтобы выполнить код при клике на кнопку, нужно найти кнопку по ID ('add') и добавить ей обработчик события 'click' с помощью метода `addEventListener`. Внутри обработчика получите значения.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Выполнение сложения и вывод результата

Объединим предыдущие шаги. Дополните код так, чтобы при клике на кнопку '+' значения из полей ввода считывались, преобразовывались в числа, складывались, и результат выводился в элемент `span` с ID 'result'.

HTML
Восстановить HTML
<div class="calculator">
  <input type="number" id="num1" placeholder="Первое число" value="15">
  <input type="number" id="num2" placeholder="Второе число" value="7">
  <button id="add">+</button>
  <p>Результат: <span id="result">?</span></p>
</div>
JavaScript
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const addButton = document.getElementById('add');
const resultSpan = document.getElementById('result');

addButton.addEventListener('click', function() {
  // Получаем и преобразуем значения в числа
  const num1 = input__1(num1Input.value);
  const num2 = input__2(num2Input.value);

  // Выполняем сложение
  const sum = num1 input__3 num2;

  // Выводим результат на страницу
  resultSpan.input__4 = sum;
});
Используйте `parseFloat()` для преобразования строковых значений из полей `.value` в числа. Сложите полученные числа. Чтобы отобразить результат на странице, присвойте его свойству `.textContent` элемента `resultSpan`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Добавление других операций (кнопки)

Расширим калькулятор, добавив кнопки для вычитания, умножения и деления. Вам нужно добавить обработчики событий для новых кнопок и реализовать соответствующую логику вычислений для каждой операции.

CSS
.calculator button { margin: 0 5px; }
HTML
Восстановить HTML
<div class="calculator">
  <input type="number" id="num1" placeholder="Первое число" value="20">
  <input type="number" id="num2" placeholder="Второе число" value="4">
  <button id="add">+</button>
  <button id="subtract">-</button>
  <button id="multiply">*</button>
  <button id="divide">/</button>
  <p>Результат: <span id="result">?</span></p>
</div>
JavaScript
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const resultSpan = document.getElementById('result');

// Функция для выполнения операции и вывода результата
function calculate(operator) {
  const num1 = parseFloat(num1Input.value);
  const num2 = parseFloat(num2Input.value);
  let calculationResult;

  if (operator === '+') {
    calculationResult = num1 + num2;
  } else if (operator === input__1) { // Вычитание
    calculationResult = num1 - num2;
  } else if (operator === input__2) { // Умножение
    calculationResult = num1 * num2;
  } else if (operator === '/') { // Деление
    calculationResult = num1 / num2;
  }

  resultSpan.textContent = calculationResult;
}

// Добавляем обработчики
document.getElementById('add').addEventListener('click', function() { calculate('+'); });
document.getElementById('subtract').addEventListener(input__3, function() { calculate('-'); });
document.getElementById('multiply').addEventListener('click', function() { calculate('*'); });
document.getElementById(input__4).addEventListener('click', function() { calculate('/'); });
Найдите все кнопки операций (например, по общему классу или по ID). Для каждой кнопки добавьте `addEventListener` на событие 'click'. Внутри каждого обработчика считывайте и преобразуйте значения из полей ввода (`parseFloat(input.value)`). Выполните соответствующую арифметическую операцию (`-`, `*`, `/`) и выведите результат в `resultSpan.textContent`. Помните про оператор для каждой кнопки.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Использование Select для выбора операции

Альтернативный способ выбора операции — использование выпадающего списка (`<select>`). Замените кнопки на `<select>` и измените JavaScript так, чтобы операция выбиралась из списка, а вычисление происходило по нажатию одной кнопки 'Вычислить'.

CSS
.calculator select, .calculator button { margin: 5px 0; }
HTML
Восстановить HTML
<div class="calculator">
  <input type="number" id="num1" placeholder="Первое число" value="100">
  <input type="number" id="num2" placeholder="Второе число" value="25">
  <select id="operation">
    <option value="+">Сложение (+)</option>
    <option value="-">Вычитание (-)</option>
    <option value="*">Умножение (*)</option>
    <option value="/">Деление (/)</option>
  </select>
  <button id="calculate">Вычислить</button>
  <p>Результат: <span id="result">?</span></p>
</div>
JavaScript
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const operationSelect = document.getElementById(input__1);
const calculateButton = document.getElementById('calculate');
const resultSpan = document.getElementById('result');

calculateButton.addEventListener('click', function() {
  const num1 = parseFloat(num1Input.value);
  const num2 = parseFloat(num2Input.value);
  const operator = operationSelect.input__2; // Получаем выбранную операцию
  let calculationResult;

  switch (input__3) { // Проверяем выбранный оператор
    case '+':
      calculationResult = num1 + num2;
      break;
    case '-':
      calculationResult = num1 - num2;
      break;
    case '*':
      calculationResult = num1 * num2;
      break;
    case '/':
      calculationResult = num1 / num2;
      break;
    default:
      calculationResult = 'Неизвестная операция';
  }

  resultSpan.textContent = input__4;
});
Найдите элемент `<select>` по ID. Его выбранное значение можно получить через свойство `.value`. Найдите кнопку 'Вычислить' по ID. Добавьте ей обработчик события 'click'. Внутри обработчика получите выбранный оператор из `<select>`, получите и преобразуйте числа из полей ввода. Используйте конструкцию `if...else if...else` или `switch` для выполнения нужной операции в зависимости от выбранного оператора. Выведите результат в `resultSpan.textContent`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Обработка ошибки: Деление на ноль

Добавим простую проверку ошибок. Модифицируйте код калькулятора (версию с кнопками) так, чтобы при попытке деления на ноль выводилось сообщение об ошибке, а не 'Infinity'.

CSS
.calculator button { margin: 0 5px; }
.error { color: red; font-weight: bold; }
HTML
Восстановить HTML
<div class="calculator">
  <input type="number" id="num1" placeholder="Первое число" value="10">
  <input type="number" id="num2" placeholder="Второе число" value="0">
  <button id="add">+</button>
  <button id="subtract">-</button>
  <button id="multiply">*</button>
  <button id="divide">/</button>
  <p>Результат: <span id="result">?</span></p>
</div>
JavaScript
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const resultSpan = document.getElementById('result');

function calculate(operator) {
  const num1 = parseFloat(num1Input.value);
  const num2 = parseFloat(num2Input.value);
  let calculationResult;
  resultSpan.classList.remove('error'); // Убираем класс ошибки если был

  if (operator === '+') {
    calculationResult = num1 + num2;
  } else if (operator === '-') {
    calculationResult = num1 - num2;
  } else if (operator === '*') {
    calculationResult = num1 * num2;
  } else if (operator === '/') {
    // Проверяем деление на ноль
    if (input__1 input__2 0) { 
      calculationResult = num1 / num2;
    } else {
      calculationResult = input__3; // Сообщение об ошибке
      resultSpan.classList.add(input__4); // Добавляем класс для стилизации ошибки
    }
  }

  resultSpan.textContent = calculationResult;
}

document.getElementById('add').addEventListener('click', function() { calculate('+'); });
document.getElementById('subtract').addEventListener('click', function() { calculate('-'); });
document.getElementById('multiply').addEventListener('click', function() { calculate('*'); });
document.getElementById('divide').addEventListener('click', function() { calculate('/'); });
В обработчике для кнопки деления ('/'), перед выполнением операции деления, добавьте проверку (`if`). Убедитесь, что второе число (`num2`) не равно нулю (`num2 !== 0`). Если оно не равно нулю, выполняйте деление как обычно. Если равно нулю, присвойте переменной `calculationResult` строку с сообщением об ошибке, например, 'Деление на ноль!'
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Обработка ошибки: Нечисловые значения

Улучшим обработку ошибок. Добавьте проверку, являются ли введенные значения числами. Если хотя бы одно из значений не является числом (например, пользователь ввел текст), выведите сообщение об ошибке.

CSS
.calculator button { margin: 0 5px; }
.error { color: red; font-weight: bold; }
HTML
Восстановить HTML
<div class="calculator">
  <input type="text" id="num1" placeholder="Первое число" value="15">
  <input type="text" id="num2" placeholder="Второе число" value="abc">
  <button id="add">+</button>
  <button id="subtract">-</button>
  <button id="multiply">*</button>
  <button id="divide">/</button>
  <p>Результат: <span id="result">?</span></p>
</div>
JavaScript
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const resultSpan = document.getElementById('result');

function calculate(operator) {
  const num1 = parseFloat(num1Input.value);
  const num2 = parseFloat(num2Input.value);
  let calculationResult;
  resultSpan.classList.remove('error');

  // Проверяем, являются ли введенные значения числами
  if (input__1(num1) || input__2(num2)) {
    calculationResult = 'Ошибка: Введите числа!';
    resultSpan.classList.add('error');
  } else {
    // Выполняем операцию, если оба значения - числа
    switch (operator) {
      case '+':
        calculationResult = num1 + num2;
        break;
      case '-':
        calculationResult = num1 - num2;
        break;
      case '*':
        calculationResult = num1 * num2;
        break;
      case '/':
        if (num2 !== 0) {
          calculationResult = num1 / num2;
        } else {
          calculationResult = 'Деление на ноль!';
          resultSpan.classList.add(input__3);
        }
        break;
      default:
        calculationResult = 'Неизвестная операция';
        resultSpan.classList.add('error');
    }
  }

  resultSpan.input__4 = calculationResult;
}

document.getElementById('add').addEventListener('click', function() { calculate('+'); });
document.getElementById('subtract').addEventListener('click', function() { calculate('-'); });
document.getElementById('multiply').addEventListener('click', function() { calculate('*'); });
document.getElementById('divide').addEventListener('click', function() { calculate('/'); });
После получения значений `num1` и `num2` (после `parseFloat`), используйте функцию `isNaN()` для проверки каждого из них. `isNaN(value)` возвращает `true`, если `value` не является числом (Not-a-Number). Если `isNaN(num1)` или `isNaN(num2)` истинно, установите `calculationResult` в сообщение об ошибке (например, 'Введите числа!') и добавьте класс 'error'. Иначе выполняйте вычисления.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру
Добавить комментарий