fullAmount

fullAmount

关注
发信
关注(28)粉丝(399)

javascript - 让JS自动为计算器应用程序完成数学方程式

我遇到的问题是数学无法正常运行。我希望计算器在fullAmount可变长度的长度等于3的情况下自动评估金额，然后清除num变量和fullAmount变量，但保留已评估的当前数字。因此，如果您将9 * 1放入计算器，我希望它保留num = []和fullAmount = [9]，但它当前将fullAmount保留为[9,*,1]，然后添加到它。



$(document).ready(function() {

  var fullAmount = []

  var num = []

  var func = null

  function evaluate(array) {
    if (array[1] === "+") {
      var complete = array[0] + array[2]
      array = [complete]
      fullAmount.push(func[0])
      console.log(complete)
    } else if (array[1] === "-") {
      var complete = array[0] - array[2]
      array = [complete]
      fullAmount.push(func[0])
      console.log(complete)
    } else if (array[1] === "X") {
      var complete = array[0] * array[2]
      array = [complete]
      fullAmount.push(func[0])
      console.log(complete)
    } else if (array[1] === "÷") {
      var complete = array[0] / array[2]
      array = [complete]
      fullAmount.push(func[0])
      console.log(complete)
    } else {
      console.log("error")
    }
    $("#res").val(complete);
  }

  $('.num').click(function() {
    num.push($(this).text())
    console.log(num)
    console.log(fullAmount)
    $("#res").val(num.join(''));
  });

  $('.action').click(function() {
    func = $(this).text();
    num = num.join("")
    fullAmount.push(parseInt(num))
    if (fullAmount.length >= 3) {
      evaluate(fullAmount)
    } else {
      fullAmount.push(func[0])
      console.log(func)
    }

    $("#res").val(fullAmount);
    func = null
    num = []
  });



  $('#equals').click(function() {
    if (fullAmount[1] === "+") {
      fullAmount.push(parseInt(num))
      var complete = fullAmount[0] + fullAmount[2]
      fullAmount = [complete]
      console.log(complete)
    } else if (fullAmount[1] === "-") {
      fullAmount.push(parseInt(num))
      var complete = fullAmount[0] - fullAmount[2]
      fullAmount = [complete]
      console.log(complete)
    } else if (fullAmount[1] === "X") {
      fullAmount.push(parseInt(num))
      var complete = fullAmount[0] * fullAmount[2]
      fullAmount = [complete]
      console.log(complete)
    } else if (fullAmount[1] === "÷") {
      fullAmount.push(parseInt(num))
      var complete = fullAmount[0] / fullAmount[2]
      fullAmount = [complete]
      console.log(complete)
    } else {
      console.log("error")
    }
    $("#res").val(complete);
  });

  $('#clear').click(function() {
    num = []
    fullAmount = []
    func = null
    $("#res").val("")
    console.log(num)
    console.log(fullAmount)
    console.log(func)

  });
});

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
  </script>
  <script src="calc.js"></script>
  <link rel="stylesheet" type="text/css" href="calc.css">
</head>

<body>
  <div id="calculator-container">
    <form class="show">
      <input type="text" id="res" name="numbers" disabled><br>
    </form>
    <center>
      <div class="calculator-view">
        <table>
          <tr>
            <td>
              <button id="clear" type="button">AC</button>
              <button id="sign" class="action" type="button">+/-</button>
              <button id="divide" class="action" type="button">÷</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="seven" class="num" type="button">7</button>
              <button id="eight" class="num" type="button">8</button>
              <button id="nine" class="num" type="button">9</button>
              <button id="multiply" class="action" type="button">X</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="four" class="num" type="button">4</button>
              <button id="five" class="num" type="button">5</button>
              <button id="six" class="num" class="num" type="button">6</button>
              <button id="minus" class="action" type="button">-</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="one" class="num" type="button">1</button>
              <button id="two" class="num" type="button">2</button>
              <button id="three" class="num" type="button">3</button>
              <button id="plus" class="action" type="button">+</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="zero" class="num" type="button">0</button>
              <button id="equals" type="button">=</button>
            </td>
          </tr>
        </table>
      </div>
</body>

</html>

最佳答案

我对您的计算器代码进行了一些更改。


每次操作后，数组num和fullAmount将重新初始化，以便可以用于新计算。
为了获得上一个操作的值，将变量complete声明为全局变量。假设用户输入2 + 3 = + 5。结果应该是10。通过声明变量complete global，我可以在之后进行检查。请参见下面的代码段：




$(document).ready(function() {

  var fullAmount = []

  var num = []

  var func = null

  var complete = null

  function evaluate(array) {
    if (array[1] === "+") {
      var complete = array[0] + array[2]
      array = [complete]
      fullAmount.push(func[0])
    } else if (array[1] === "-") {
      var complete = array[0] - array[2]
      array = [complete]
      fullAmount.push(func[0])
    } else if (array[1] === "X") {
      var complete = array[0] * array[2]
      array = [complete]
      fullAmount.push(func[0])
    } else if (array[1] === "÷") {
      var complete = array[0] / array[2]
      array = [complete]
      fullAmount.push(func[0])
    } else {
      console.log("error")
    }
    $("#res").val(complete);
  }

  $('.num').click(function() {
    num.push($(this).text())
    $("#res").val(num.join(''));
  });

  $('.action').click(function() {
    func = $(this).text();
    num = num.join("")

    if(parseInt(num)){
     fullAmount.push(parseInt(num))
    }
    //if there is no value before operator, the calculator will use previous value
    else if(complete && !fullAmount[0]){
      fullAmount.push(complete);
    }

    if (fullAmount.length >= 3) {
      evaluate(fullAmount)
    } else {
      fullAmount.push(func[0])
    }

    $("#res").val(fullAmount);
    func = null
    num = []
  });



  $('#equals').click(function() {
    if (fullAmount[1] === "+") {
      fullAmount.push(parseInt(num))
      complete = fullAmount[0] + fullAmount[2]
      fullAmount = []
      num = []

    } else if (fullAmount[1] === "-") {
      fullAmount.push(parseInt(num))
      complete = fullAmount[0] - fullAmount[2]
      fullAmount = []
      num = []

    } else if (fullAmount[1] === "X") {
      fullAmount.push(parseInt(num))
      complete = fullAmount[0] * fullAmount[2]
      fullAmount = []
      num = []

    } else if (fullAmount[1] === "÷") {
      fullAmount.push(parseInt(num))
      complete = fullAmount[0] / fullAmount[2]
      fullAmount = []
      num = []

    } else {
      console.log("error")
    }
    $("#res").val(complete);
  });

  $('#clear').click(function() {
    num = []
    fullAmount = []
    func = null
    complete = null
    $("#res").val("")

  });
});

.as-console-wrapper { max-height: 100% !important; top: 0; }

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
  </script>
  <script src="calc.js"></script>
  <link rel="stylesheet" type="text/css" href="calc.css">
</head>

<body>
  <div id="calculator-container">
    <form class="show">
      <input type="text" id="res" name="numbers" disabled><br>
    </form>
    <center>
      <div class="calculator-view">
        <table>
          <tr>
            <td>
              <button id="clear" type="button">AC</button>
              <button id="sign" class="action" type="button">+/-</button>
              <button id="divide" class="action" type="button">÷</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="seven" class="num" type="button">7</button>
              <button id="eight" class="num" type="button">8</button>
              <button id="nine" class="num" type="button">9</button>
              <button id="multiply" class="action" type="button">X</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="four" class="num" type="button">4</button>
              <button id="five" class="num" type="button">5</button>
              <button id="six" class="num" class="num" type="button">6</button>
              <button id="minus" class="action" type="button">-</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="one" class="num" type="button">1</button>
              <button id="two" class="num" type="button">2</button>
              <button id="three" class="num" type="button">3</button>
              <button id="plus" class="action" type="button">+</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="zero" class="num" type="button">0</button>
              <button id="equals" type="button">=</button>
            </td>
          </tr>
        </table>
      </div>
</body>

</html>

09-25 15:43
Powered by LMLPHP ©2024 fullAmount 0.032092