4

Я знаю, что похожие вопросы задали ранее. Но всё-таки мне хотелось бы узнать, можно ли написать функцию для калькулятора, опираясь на код, мной написанный до сих пор.

Знаю, как сделать простейший калькулятор для сложения эксклюзивно:

 <input id="num1"/>
 <p>+</p>
 <input id="num2"/>
 <button onclick="func()">равняется...</button>

 <p id="result"></p>

 <script>
    function func(){
          var num1 = Number(document.getElementById("num1").value);
          var num2 = Number(document.getElementById("num2").value);
          var result = num1 + num2;

          document.getElementById("result").innerHTML = result;
          }
 </script>

код сложения

До сих пор, нет сомнений. Но сейчас, мне хотелось бы заменить статичный знак плюса (+) четырьмя кнопками для всех базовых операций: сложения (+), вычитания (-), умножения (x), деления (:).

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

Нужно ли делать отдельную функцию для каждой кнопки операторов? Или можно вставить всю программу в функцию кнопки выполнения ("равняется...")?

Вот код, написанный до сих пор:

<input id="num1"/>

<div id="operator_btns">
  <button id="plus" class="operator">+</button>
  <button id="minus" class="operator">-</button>
  <button id="times" class="operator">x</button>
  <button id="divide" class="operator">:</button>
</div>

<input id="num2"/>

<button onclick="func()">равняется...</button>

<p id="result"></p>


<script>
  function func(){
    var num1 = Number(document.getElementById("num1").value);
    var num2 = Number(document.getElementById("num2").value);
    result = ???

    document.getElementById("result").innerHTML = result;
    }
</script>

разные операторы

Какой будет функция переменной result? Спасибо за помощь!

1
  • Можно получать текст класса operator при нажатии на него, и с через if сравнивать если + то сложение и тд(п.с. я не претендую на самый правильный ответ, но может Вам это поможет)
    – Oleksandr
    Commented 30 мар. 2019 в 23:30

5 ответов 5

7

Вариантов много. Например, при нажатии на кнопку оператора, соответствующе устанавливаем переменную текущего оператора. Затем, при нажатии на кнопку равняется считаем результат в зависимости от текущего оператора.

<input id="num1" />

<div id="operator_btns">
  <button id="plus" class="operator" onclick="op='+'">+</button>
  <button id="minus" class="operator" onclick="op='-'">-</button>
  <button id="times" class="operator" onclick="op='*'">x</button>
  <button id="divide" class="operator" onclick="op='/'">:</button>
</div>

<input id="num2" />

<button onclick="func()">равняется...</button>

<p id="result"></p>


<script>
  var op; //выбранный оператор
  function func() {
    var result;
    var num1 = Number(document.getElementById("num1").value);
    var num2 = Number(document.getElementById("num2").value);
    switch (op) {
      case '+':
        result = num1 + num2;
        break;
      case '-':
        result = num1 - num2;
        break;
      case '*':
        result = num1 * num2;
        break;
      case '/':
        if (num2) {
          result = num1 / num2;
        } else {
          result = 'бесконечность';
        }
        break;
      default:
        result = 'выберите операцию';
    }

    document.getElementById("result").innerHTML = result;
  }
</script>

2
  • Это точно то, что мне нужно было. Огромное спасибо! На первый взгляд, я не понял, зачем нужна строчка "break", но, разобравшись об этом, я нашёл, что это обязанность команды "switch". "Case" похож на "if", пока "default" - аналог команды "else". По видимости, не обязательно заявить "var result;" для определения этой переменной?
    – swrutra
    Commented 5 апр. 2019 в 15:24
  • 1
    Кстати насчет var result - это моё упущение. Если переменную не объявлять внутри функции, то по умолчанию она будет объявлена глобально - это не есть хорошо! Так что я подправил ответ Commented 5 апр. 2019 в 15:55
5

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

Решение через switch - в принципе, самое простое (исключая вариант eval()) и распространенное.

"Лапшу" if..else if лучше не использовать: есть негласное правило, ограничивающее использование такой конструкции тремя вариантами - а у нас их четыре. Да, читаемость не сильно пострадает от еще одного else if, но абсолютно незачем "ползать по краю", когда можно написать код чисто.


Пример с использованием современных возможностей JavaScript:

document.addEventListener('DOMContentLoaded', () => {
  const [inpA, ops, inpB, btnCalc, inpRes] = 
    Array.from(document.querySelectorAll('.calc > *'));
  for (let op of ops.children)
    op.addEventListener('click', selectOp); 
  btnCalc.addEventListener('click', calc); 

  function selectOp() {
    for (let op of this.parentElement.children)
      op.classList.remove('active'); 
    this.classList.add('active'); 
  }

  function calc() {
    let [a, b, result] = [+inpA.value, +inpB.value, 0]; 
    if (!isFinite(a) || !isFinite(b))
      return inpRes.value = 'Неверный ввод'; 
    inpA.value = a; 
    inpB.value = b; 
    const selectedOp = document.querySelector('.calc [data-op].active'); 
    switch (selectedOp.dataset.op) {
      case '+': result = a + b; break; 
      case '-': result = a - b; break; 
      case '∗': result = a * b; break; 
      case '÷': result = a / b; 
    }
    inpRes.value = result; 
  }
});
.calc {
  display: flex; flex-flow: column nowrap; 
  align-items: stretch; 
  max-width: 300px; 
  font: 18px monospace; }

.calc * { font: inherit; outline: none; }
.calc > * + * { margin-top: 0.5rem; }

.calc div {
  display: flex; flex-flow: row nowrap; 
  justify-content: space-between; 
  padding: 0 1px; }

.calc [data-op] { width: calc(25% - 8px); }

.calc [data-op]::before, 
.calc button {
  content: attr(data-op); 
  display: inline-block; 
  width: 100%; 
  font-size: 1.4rem; line-height: 1.4rem; 
  text-align: center; 
  border: none; 
  border-radius: 3px; 
  transition: box-shadow 0.15s linear; 
  box-shadow: 0 0 0 1px #ccc; 
  background: #eee; 
  cursor: pointer; }

.calc [data-op]:hover::before, 
.calc button:hover { box-shadow: 0 0 0 1px #7af; }

.calc [data-op].active::before { background: #aea; }

.calc [readonly] { border: none; text-align: center; }
<div class="calc">
  <input type="number">
  <div>
    <span data-op="+" class="active"></span>
    <span data-op="-"></span>
    <span data-op="∗"></span>
    <span data-op="÷"></span>
  </div>
  <input type="number">
  <button>=</button>
  <input readonly>
</div>

1

Есть еще такой вариант

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8" />
    <title>JS Calculator</title>
    <style>
        body { display: flex; height: 100vh; }
        #calculator { 
            margin: auto; 
            padding: 20px;
            background: silver;
            box-shadow: 0 0 10px black;
            border-radius: 10px;
        }
        #display, button {
            width: 100px;
            padding: 10px;
            margin: 10px;
            border: 1px solid gray;
            border-radius: 5px;
            box-shadow: 2px 2px gray;
            font: bold 3em Impact;
            outline: none;
        }
        #display {
            width: 460px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="calculator">
        <div class="row">
            <input id="display" type="text" />
        </div>
        <div class="row">
            <button onclick="press('7')">7</button>
            <button onclick="press('8')">8</button>
            <button onclick="press('9')">9</button>
            <button onclick="press('+')">+</button>
        </div>
        <div class="row">
            <button onclick="press('4')">4</button>
            <button onclick="press('5')">5</button>
            <button onclick="press('6')">6</button>
            <button onclick="press('-')">-</button>
        </div>
        <div class="row">
            <button onclick="press('1')">1</button>
            <button onclick="press('2')">2</button>
            <button onclick="press('3')">3</button>
            <button onclick="press('*')">*</button>
        </div>
        <div class="row">
            <button onclick="clear1()">C</button>
            <button onclick="press('0')">0</button>
            <button onclick="calc()">=</button>
            <button onclick="press('/')">/</button>
        </div>
    </div>
    
    <script>
        let display = document.getElementById("display");
    
        function clear1() {
            display.value = "";
        }
        function calc() {
            display.value = eval(display.value);
        }
        function press(x) {
            display.value += x;
        }
    </script>
</body>
1
0

Вот готовый калькулятор:

<!DOCTYPE html>
<html>
<head>
    <title>Javascript Calculator - Version 1.0</title>
    <style>
        #calculator {
            width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: center;
        }

       #calculator button {
            width: 60px;
            height: 60px;
            font-size: 18px;
            margin: 5px;
            cursor: pointer;
        }

        #display {
            width: 80%;
            height: 40px;
            font-size: 24px; /* Настройте размер шрифта в соответствии с вашими предпочтениями */
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <h1>Калькулятор</h1>
    <p>Версия: 1.0</p>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <br>
        <button onclick="addToDisplay('7')">7</button>
        <button onclick="addToDisplay('8')">8</button>
        <button onclick="addToDisplay('9')">9</button>
        <button onclick="addToDisplay('+')">+</button>
        <br>
        <button onclick="addToDisplay('4')">4</button>
        <button onclick="addToDisplay('5')">5</button>
        <button onclick="addToDisplay('6')">6</button>
        <button onclick="addToDisplay('-')">-</button>
        <br>
        <button onclick="addToDisplay('1')">1</button>
        <button onclick="addToDisplay('2')">2</button>
        <button onclick="addToDisplay('3')">3</button>
        <button onclick="addToDisplay('*')">*</button>
        <br>
        <button onclick="addToDisplay('0')">0</button>
        <button onclick="clearDisplay()">C</button>
        <button onclick="calculateResult()">=</button>
        <button onclick="addToDisplay('/')">/</button>
    </div>

    <script>
        // Эта функция используется для добавления конкретного "value" (значения) на дисплей.
  function addToDisplay(value) {
            document.getElementById('display').value += value;
        }
        // Эта функция очищает дисплей, устанавливая его значение в пустую строку.
        function clearDisplay() {
            document.getElementById('display').value = '';
        }
        // Эта функция вычисляет результат выражения на дисплее с помощью функции 'eval'.
        // Она обрабатывает ошибки и выводит сообщение 'Error', если выражение недопустимо.
        function calculateResult() {
            try {
       // Получение результата выражения и вывод результата на дисплей.
                document.getElementById('display').value = eval(document.getElementById('display').value);
            } catch (error) {
       // Если в процессе вычисления возникла ошибка, на дисплее отобразится сообщение 'Error'.
                document.getElementById('display').value = 'Error';
            }
        }
    </script>
</body>
</html>

Скачать.

-1

Можно сделать чуточку красивее и проще. Код не мой, но я его рассматривал, когда начинал изучать js.

   <head> 
    <meta charset="utf-8" />
    <title>Калькулятор</title>
    <style type="text/css">
        #calculator * {font-size: 16px;}
        #calculator table {border: solid 3px silver; border-spacing: 3px; background-color: #EEE; }
        #calculator table td {border-spacing: 3px;}
        input.display {width: 166px; text-align: right;}
        td.buttons {border-top: solid 1px silver;}  
        input[type= button] {width: 40px; height: 30px;}
    </style>
    </head>

    <body>
    <form name="calc" id="calculator">
        <table>
        <tr>
        <td>
            <input type="text" name="input" size="16" class="display">
        </td>
        </tr>
        <tr>
        <td class="buttons">
            <input type="button" name="one" value="1" OnClick="calc.input.value += '1'">
            <input type="button" name="two" value="2" OnClick="calc.input.value += '2'">
            <input type="button" name="three" value="3" OnClick="calc.input.value += '3'">
            <input type="button" name="add" value="+" OnClick="calc.input.value += '+'">
            <br>
            <input type="button" name="four" value="4" OnClick="calc.input.value += '4'">
            <input type="button" name="five" value="5" OnClick="calc.input.value += '5'">
            <input type="button" name="six" value="6" OnClick="calc.input.value += '6'">
            <input type="button" name="sub" value="-" OnClick="calc.input.value += '-'">
            <br>
            <input type="button" name="seven" value="7" OnClick="calc.input.value += '7'">
            <input type="button" name="eight" value="8" OnClick="calc.input.value += '8'">
            <input type="button" name="nine" value="9" OnClick="calc.input.value += '9'">
            <input type="button" name="mul" value="x" OnClick="calc.input.value += '*'">
            <br>
            <input type="button" name="clear" value="c" OnClick="calc.input.value = ''">
            <input type="button" name="zero" value="0" OnClick="calc.input.value += '0'">
            <input type="button" name="doit" value="=" OnClick="calc.input.value = eval(calc.input.value)">
            <input type="button" name="div"  value="/" OnClick="calc.input.value += '/'">
        </td>
        </tr>
        </table>
    </form>
    </body>

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.