Простой калькулятор

На примере простого калькулятора, мы узнаем как вводить данные, производить вычисления и показывать результат на JavaScript.


Создадим простую форму калькулятора.

<!-- поле ввода первого числа -->
<input id="num1" />
<!-- блок с кнопками -->
<div id="operator_btns">
<button id="plus" onclick="op='+'">+</button>
<button id="minus" onclick="op='-'">-</button>
<button id="times" onclick="op='*'">x</button>
<button id="divide" onclick="op=':'">:</button>
</div>
<!-- поле ввода второго числа -->
<input id="num2" />
<br/>
<!-- кнопка для расчётов -->
<button onclick="func()">Посчитать</button>
<!-- здесь будет результат -->
<p id="result"></p>

Тут всё просто, есть поле ввода первого числа, кнопки – сложить, вычесть, умножить, разделить. Поле ввода второго числа и кнопка вычислить. <p id="result"></p> будет выводить результат.


<script>
// переменная, в которой хранится выбранное математическое действие
let op;
// функция расчёта
function func() {
// переменная для результата
let result;
// получаем первое и второе число, меняем запятую на точку если число дробное и пользователь поставил запятую
let num1 = document.getElementById("num1").value.replace(",",".");
let num2 = document.getElementById("num2").value.replace(",",".");
// смотрим, что было в переменной с действием, и действуем исходя из этого
switch (op) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
}
// отправляем результат на страницу
document.getElementById('result').innerHTML = result;
}
</script>

Получится вот так.



Понравилась страница? Поделитесь ссылкой в социальных сетях. Поддержите проект!