Как выполнить математику для элементов в массиве, когда некоторые являются строками, а некоторые числами? - PullRequest
0 голосов
/ 24 июня 2019

Я пытаюсь создать калькулятор, используя jQuery и JavaScript.Мой подход включает добавление каждой записи (числа и операторы) в массив, а затем выполнение математики для них.Сам калькулятор неполон, так как не может получить элементы в массиве для суммирования / вычитания / умножения / деления в зависимости от того, на какую кнопку нажали.

Я попытался создать 2 отдельных массива, полагая, что оператор тоже не должен бытьмассив, но это не сработало и могло создать дополнительные проблемы в будущем.

<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container w-25 align-left">
        <form>
                <div class="form-group">
                  <input type="text" class="form-control align-left" id="box" value='' placeholder="" readonly>
                </div>
              </form>
                </div>
<div class='container w-25'>
<div class="container pb-2">
    <button type="button" id='seven' value='7' class="num-btn btn btn-dark">7</button>
    <button type="button" id='eight' value='8' class="num-btn btn btn-dark">8</button>
    <button type="button" id='nine' value='9' class="num-btn btn btn-dark">9</button>
    <button type="button" id='divide' value='/'class="op-btn btn btn-dark">/</button>
</div>
<div class="container pb-2">
        <button type="button" id='four' value='4' class="num-btn btn btn-dark">4</button>
        <button type="button" id='five' value='5' class="num-btn btn btn-dark">5</button>
        <button type="button" id='six' value='6' class="num-btn btn btn-dark">6</button>
        <button type="button" id='multiply' value='*' class="op-btn btn btn-dark">*</button>
    </div>
    <div class="container pb-2">
            <button type="button" id='one' value='1' class="num-btn btn btn-dark">1</button>
            <button type="button" id='two' value='2' class="num-btn btn btn-dark">2</button>
            <button type="button" id='three' value='3' class="num-btn btn btn-dark">3</button>
            <button type="button" id='minus' value='-' class="op-btn btn btn-dark">-</button>
        </div>
        <div class="container pb-2">
                <button type="button" id='zero' value='0' class="num-btn btn btn-dark">0</button>
                <button type="button" id='decimal' value='.' class="num-btn btn btn-dark">.</button>
                <button type="button" id='plus' value='+' class="op-btn btn btn-dark">+</button>
                <button type="button" id='equals' value='=' class="eq-btn btn btn-dark">=</button>
            </div>
        </div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<script src='scripts.js'></script>
</html>
$('document').ready(function () {
    var num1 = []; //creates array for first number set
    var result = '';


        $('.num-btn').click(function () {
            num1.push($(this).prop('value')); //add each number to array
            arr1 = num1.join(' '); //joins numbers without comma using ''
            $('#box').val(arr1);
            console.log(arr1);
            result = (arr1);
            console.log(result);
        });


    $('.op-btn').click(function () {
        var operator = $(this).attr('value');
        num1.push(operator);
        console.log(operator);
        $('#box').val(''); //clears input #box
        console.log($('#box').val())
    });
    });

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

То, что вы пытаетесь сделать, на самом деле немного сложно, потому что определенные строковые значения (например, *) должны запускать определенные операции (например, умножение) .
Один способ обработкиэто с нижеприведенной функцией operation. Эта функция запускается один раз для каждой операции, выбранной пользователем.

Функция evaluate предполагает, что вы уже собраличисла в один массив и операторы в отдельный массив. (Это разделение помогает предотвратить ошибки типов и позволяет легко определить, сколько операций необходимо выполнить.) Функция накапливает математический результат в resultSoFar переменная и печатает ее, когда не осталось операций для выполнения.

let nums = [8, 5, 2];
let ops = ["*", "+"];
evaluate(nums, ops);

function operation(a, operator, b){ // eg: operation(8, "*", 5)
  switch (operator){
    case "+": return a + b;
    case "-": return a - b;
    case "*": return a * b;
    case "/": return a / b; // This will fail spectacularly if b is zero
    default:
      console.log("Unknown operator: " + operator);
      return NaN;
  }
}

function evaluate(numsArray, opsArray){  

  // Requires numsArray to have exactly one item more than opsArray
  if(opsArray.length + 1 != numsArray.length){
    console.log("Error: Array lengths mismatch");
    return; // Function will stop here if lengths aren't compatible
  }

 // Starts out with the first number
  let resultSoFar = numsArray[0];

  // We care about the index of each item, which is the second argument 
  //   to the anonymous function that we pass to `Array.forEach`.
  // The first argument is not important to us, as its name implies.
  opsArray.forEach(function(_, index){ 

    // Applies the operation to `resultSoFar` and the next number
    resultSoFar = operation(resultSoFar, opsArray[index], numsArray[index + 1]);

  // (In the example, there are two operations to perform:
  //   The first time through the loop, 8 * 5 = 40
  //   The second time through the loop, 40 + 2 = 42)
  });
  
  console.log(resultSoFar);
}

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

Примечание. Функция evaluate может быть реализована более кратко с помощью функции Array.reduce, но в этом примере используется более подробный синтаксис, чтобы его было легче прочитать любому незнакомому человеку.с этой (очень полезной) функцией.

0 голосов
/ 24 июня 2019

Вы можете использовать функцию eval result = eval(arr1);

Подробнее см. На https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

$('document').ready(function () {
    var num1 = []; //creates array for first number set
    var result = '';


        $('.num-btn').click(function () {
            num1.push($(this).prop('value')); //add each number to array
            arr1 = num1.join(' '); //joins numbers without comma using ''
            $('#box').val(arr1);
            console.log(arr1);
            result = eval(arr1);
            console.log(result);
        });


    $('.op-btn').click(function () {
        var operator = $(this).attr('value');
        num1.push(operator);
        console.log(operator);
        $('#box').val(''); //clears input #box
        console.log($('#box').val())
    });
    });
<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container w-25 align-left">
        <form>
                <div class="form-group">
                  <input type="text" class="form-control align-left" id="box" value='' placeholder="" readonly>
                </div>
              </form>
                </div>
<div class='container w-25'>
<div class="container pb-2">
    <button type="button" id='seven' value='7' class="num-btn btn btn-dark">7</button>
    <button type="button" id='eight' value='8' class="num-btn btn btn-dark">8</button>
    <button type="button" id='nine' value='9' class="num-btn btn btn-dark">9</button>
    <button type="button" id='divide' value='/'class="op-btn btn btn-dark">/</button>
</div>
<div class="container pb-2">
        <button type="button" id='four' value='4' class="num-btn btn btn-dark">4</button>
        <button type="button" id='five' value='5' class="num-btn btn btn-dark">5</button>
        <button type="button" id='six' value='6' class="num-btn btn btn-dark">6</button>
        <button type="button" id='multiply' value='*' class="op-btn btn btn-dark">*</button>
    </div>
    <div class="container pb-2">
            <button type="button" id='one' value='1' class="num-btn btn btn-dark">1</button>
            <button type="button" id='two' value='2' class="num-btn btn btn-dark">2</button>
            <button type="button" id='three' value='3' class="num-btn btn btn-dark">3</button>
            <button type="button" id='minus' value='-' class="op-btn btn btn-dark">-</button>
        </div>
        <div class="container pb-2">
                <button type="button" id='zero' value='0' class="num-btn btn btn-dark">0</button>
                <button type="button" id='decimal' value='.' class="num-btn btn btn-dark">.</button>
                <button type="button" id='plus' value='+' class="op-btn btn btn-dark">+</button>
                <button type="button" id='equals' value='=' class="eq-btn btn btn-dark">=</button>
            </div>
        </div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<script src='scripts.js'></script>
</html>
...