拥有JS自动完成计算器应用程序的数学方程式

时间：2017-11-16 15:53:08

标签： javascript html

我遇到的问题是数学运算不符合预期。如果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>

2 个答案:

答案 0 :(得分：0)

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

  • 每次操作后，数组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>

答案 1 :(得分：0)

我做了一些简单的改动。我没有完成整个计算器，因为这是你的工作。我完成了一部分，所以你可以得到一个想法。

＆＃13;
＆＃13; 
   

$(document).ready(function() {
  
  var array = [];
  
  function getSum(total, num) {
    return parseInt(total) + parseInt(num);
  }
  
  $('.elem').click(function(e) {
    
    if(array.length <= 2){
      
      array.push(e.target.innerText);
      
      var getTotal = isNaN(getSum(array[0],array[2])) ? array.join(' '):getSum(array[0],array[2]);
      
      document.getElementById('res').value = getTotal;
    }
    
    if(e.target.innerText === 'AC'){
        document.getElementById('res').value = '';
    };
  });
});
＆＃13; 
.as-console-wrapper { max-height: 100% !important; top: 0; }
＆＃13; 
<!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"><br>
    </form>
    <center>
      <div class="calculator-view">
        <table>
          <tr>
            <td>
              <button id="clear" class="elem" type="button">AC</button>
              <button id="sign" class="elem" type="button">+/-</button>
              <button id="divide" class="elem" type="button">÷</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="seven" class="elem" type="button">7</button>
              <button id="eight" class="elem" type="button">8</button>
              <button id="nine" class="elem" type="button">9</button>
              <button id="multiply" class="elem" type="button">*</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="four" class="elem" type="button">4</button>
              <button id="five" class="elem" type="button">5</button>
              <button id="six" class="elem" type="button">6</button>
              <button id="minus" class="elem" type="button">-</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="one" class="elem" type="button">1</button>
              <button id="two" class="elem" type="button">2</button>
              <button id="three" class="elem" type="button">3</button>
            </td>
          </tr>
          <tr>
            <td>
              <button id="zero" class="elem" type="button">0</button>
              <button id="equals" type="button" class="elem">=</button>
            </td>
          </tr>
        </table>
      </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题