stackoom
  简体   繁体   中英

Have JS auto complete math equations for a calculator app

 原文  2017-11-16 15:53:08  4   2    javascript/ html

Question

The issue I am having is that the math is not working as intended. I would like the calculator to auto evaluate the amount if the length of the fullAmount variable length is equal to 3 and then clear the num variable and the fullAmount variable but leave the current number that has been evaluated. So if you put 9 * 1 into the calculator I want it to leave num = [] and fullAmount = [9] but it is currently leaving the fullAmount with [9,*,1] and then adds on to it. 

 $(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 answers

solution1
 0  2017-11-16 17:20:35

I made some changes in your calculator code.

  • After each operation, the arrays num and fullAmount are reinitialized so that they can be used for new computation.
  • To get the value of the previous operation, the variable complete is declared global. Let's suppose the user typed in 2 + 3 = + 5 . The result should be 10. By declaring the variable complete global , I can make some check on it after. See the snippet below: 

 $(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>

solution2
 0  2017-11-16 18:25:09

I made some simple changes. I did not complete the entire calculator because that is your job. I completed one portion, so you can get an idea. 

 $(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 = ''; }; }); }); 
 .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"><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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question google distance calculator and auto complete Why wont my calculator function complete the math? Solving Lotka–Volterra equations with math.js Implementing Auto Complete with Ember JS auto complete for angular js not working JS - Create smart auto complete Javascript total math of string with multiple operators for js calculator Customizing MWD for math equations i've made a calculator but i have no idea how to show how the calculator did the math GPA Calculator Math Issue
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM