0

Имеется вот такой вариант калькулятора, в данном случае при нажатии на кнопку равно, проводится сбор в строковом значении, как его перевести в нужный мне формат? То есть если ввести 3+3, этот код соберёт его и выведет в виде текста, а нужно, чтоб он посчитал сумму(в зависимости от выбранной операции).

$(document).ready(function() {
  $('button').click(function() {
    var mat = $(this).text();
    var rounded = $('.inputCalc').val() + mat;
    $('.inputCalc').val(rounded);
  })
  $('.remove').click(function() {
    $('.inputCalc').val('');
  })
  $('.equal').click(function() {
    var equal = ($('.inputCalc').val());

  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc rounded p-3">
  <div class="col-xs-12 m-b-3 m-t-3">
    <input type="text" disabled class="inputCalc text-right m-3 p-3 rounded">
  </div>
  <div class="flex">
    <button value="1" class="buttonCalc m-1 numeral rounded">1</button>
    <button value="2" class="buttonCalc m-1 numeral rounded">2</button>
    <button value="3" class="buttonCalc m-1 numeral rounded">3</button>
    <button value="+" class="buttonCalc m-1 greenBut rounded">+</button>
  </div>
  <div class="flex">
    <button value="4" class="buttonCalc m-1 numeral rounded">4</button>
    <button value="5" class="buttonCalc m-1 numeral rounded">5</button>
    <button value="6" class="buttonCalc m-1 numeral rounded">6</button>
    <button value="-" class="buttonCalc m-1 blueDarkBut rounded">-</button>
  </div>
  <div class="flex">
    <button value="7" class="buttonCalc m-1 numeral rounded">7</button>
    <button value="8" class="buttonCalc m-1 numeral rounded">8</button>
    <button value="9" class="buttonCalc m-1 numeral rounded">9</button>
    <button value="*" class="buttonCalc m-1 yellowBut rounded">*</button>
  </div>
  <div class="flex">
    <button value="0" class="buttonCalcZer m-1 numeral rounded">0</button>
    <button class="buttonCalcZer m-1 rounded remove">AC</button>
    <button value="/" class="buttonCalc m-1 blueBut rounded">/</button>
  </div>
  <div class="flex">
    <button class="equal m-1 rounded">=</button>
  </div>
</div>

0

1 ответ 1

2

Такой "волшебной" функции не существует (кроме eval - спасибо за комментарий пользователю @Grundy). Нужно парсить или использовать внешнюю библиотеку, которая, собственно, делает то же самое. Решение "на коленке" используя Ваш код:

$(document).ready(function() {
  $('button').click(function() {
    var mat = $(this).text();
    var rounded = $('.inputCalc').val() + mat;
    $('.inputCalc').val(rounded);
  })
  $('.remove').click(function() {
    $('.inputCalc').val('');
  })
  $('.equal').click(function() {
    $('.inputCalc').val(math.eval($('.inputCalc').val().replace(/=/, '')));
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.2/math.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc rounded p-3">
  <div class="col-xs-12 m-b-3 m-t-3">
    <input type="text" disabled class="inputCalc text-right m-3 p-3 rounded">
  </div>
  <div class="flex">
    <button value="1" class="buttonCalc m-1 numeral rounded">1</button>
    <button value="2" class="buttonCalc m-1 numeral rounded">2</button>
    <button value="3" class="buttonCalc m-1 numeral rounded">3</button>
    <button value="+" class="buttonCalc m-1 greenBut rounded">+</button>
  </div>
  <div class="flex">
    <button value="4" class="buttonCalc m-1 numeral rounded">4</button>
    <button value="5" class="buttonCalc m-1 numeral rounded">5</button>
    <button value="6" class="buttonCalc m-1 numeral rounded">6</button>
    <button value="-" class="buttonCalc m-1 blueDarkBut rounded">-</button>
  </div>
  <div class="flex">
    <button value="7" class="buttonCalc m-1 numeral rounded">7</button>
    <button value="8" class="buttonCalc m-1 numeral rounded">8</button>
    <button value="9" class="buttonCalc m-1 numeral rounded">9</button>
    <button value="*" class="buttonCalc m-1 yellowBut rounded">*</button>
  </div>
  <div class="flex">
    <button value="0" class="buttonCalcZer m-1 numeral rounded">0</button>
    <button class="buttonCalcZer m-1 rounded remove">AC</button>
    <button value="/" class="buttonCalc m-1 blueBut rounded">/</button>
  </div>
  <div class="flex">
    <button class="equal m-1 rounded">=</button>
  </div>
</div>

Здесь используется библиотека Math.js (но не обязательно именно её использовать). На $('.equal').click повесил преобразование строки $('.inputCalc').val() (у которой предварительно убирается знак "="). Эта строка входит в качестве аргумента в math.eval (как раз работает библиотека, документация приведена здесь). И полученный результат записывается обратно в $('.inputCalc').val(). Решение не идеально, но рабочее. Здесь важно было показать не "суперкомпактность", а пример, как можно преобразовать значение строки, например, "3+3" в значение "6", а также сохранить по максимуму код автора.

8
  • 3
    Решение, может быть, и подходящее. Но т.к. нет никаких объяснений, что, где и почему делается, то поставил минус. 12 фев 2019 в 9:31
  • Я добавил лишь одну строчку, какие Вам нужны объяснения?
    – Kvilios
    12 фев 2019 в 9:32
  • 3
    Куда добавил? Что эта строчка делает? Ответ должен быть объясняющим и обучающим, а не заставлять искать что и где изменилось. 12 фев 2019 в 9:33
  • 1
    Я добавил описание, просьба не судить строго.
    – Kvilios
    12 фев 2019 в 9:41
  • 1
    @Kvilios, формально eval Не больший evil чем наличие devtools в браузере, ну и если не пихать в него неизвестно откуда взявшуюся строку - все ок :)
    – Grundy
    12 фев 2019 в 10:06

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