javascript - Building a calculator using JQuery, Issues with multiple calculations -
i have been building calculator jquery. clear button doesn't work after multiple calculations , further calculations yield incorrect results.
i looking improve solution correct multiple calculations problem running into.
my snippet below.
var alpha = 0; var bravo = 0; var charlie = 0; $(document).ready(function(){ $('#button1').click(function(){ $('#output').val($(this).val()); }); $('#button2').click(function(){ $('#output').val($(this).val()); }); $('#button3').click(function(){ $('#output').val($(this).val()); }); $('#button4').click(function(){ $('#output').val($(this).val()); }); $('#button5').click(function(){ $('#output').val($(this).val()); }); $('#button6').click(function(){ $('#output').val($(this).val()); }); $('#button7').click(function(){ $('#output').val($(this).val()); }); $('#button8').click(function(){ $('#output').val($(this).val()); }); $('#button9').click(function(){ $('#output').val($(this).val()); }); $('#button0').click(function(){ $('#output').val($(this).val()); }); $('#buttonclear').click(function(){ $('#output').val($(this).val()); }); }); $(document).ready(function(){ $('#buttonplus').click(function(){ alpha = +$("#output").val(); if (alpha >= 0) { $('#buttonequals').click(function(){ bravo = +$("#output").val(); charlie = alpha+bravo; $('#output').val(charlie); return; }); } }); $('#buttonsubtraction').click(function(){ alpha = +$("#output").val(); if (alpha >= 0) { $('#buttonequals').click(function(){ bravo = +$("#output").val(); charlie = alpha-bravo; $('#output').val(charlie); return; }); } }); $('#buttonmultiply').click(function(){ alpha = +$("#output").val(); if (alpha >= 0) { $('#buttonequals').click(function(){ bravo = +$("#output").val(); charlie = alpha*bravo; $('#output').val(charlie); return; }); } }); $('#buttondivide').click(function(){ alpha = +$("#output").val(); if (alpha >= 0) { $('#buttonequals').click(function(){ bravo = +$("#output").val(); charlie = alpha/bravo; $('#output').val(charlie); return; }); } }); $('#buttonclear').click(function(){ alpha = 0; bravo= 0; charlie = 0; }); });<table> <tr> <td> <input type="text" id="output"> <!-- note: id of textbox "output" --> <br> </td> </tr> <tr> <td> <input type="button" name="one" value = "1" id="button1"> <!-- 1 --> <input type = "button" name = "two" value = "2" id="button2" > <!-- 2 --> <input type = "button" name = "three" value = "3" id="button3"> <!-- 3 --> <input type = "button" name = "add" value = "+" id="buttonplus"> <!-- + --> <br /> <input type = "button" name = "four" value = "4"id="button4"> <!-- 4 --> <input type = "button" name = "five" value = "5" id="button5"> <!-- 5 --> <input type = "button" name = "six" value = "6" id="button6"> <!-- 6 --> <input type = "button" name = "subtract" value = "-" id="buttonsubtraction"> <!-- - --> <br /> <input type = "button" name = "seven" value = "7" id="button7"> <!-- 7 --> <input type = "button" name = "eight" value = "8" id="button8"> <!-- 8 --> <input type = "button" name = "nine" value = "9" id="button9"> <!-- 9 --> <input type = "button" name = "multiply" value = "x" id="buttonmultiply"> <!-- * --> <br /> <input type = "button" name = "clear" value = "ce" id="buttonclear"> <!-- '' --> <input type = "button" name = "zero" value = "0" id="button0"> <!-- 0 --> <input type = "button" name = "evaluate" value = " = " id="buttonequals"> <input type = "button" name = "divide" value = "÷" id="buttondivide"> <!-- / --> <br /> </td> </tr> </table>
please let me know if have questions. tried keep code self explanatory.
some helpful links:
$("...").on("event", function(){ ... })
failry overhauled version below.
var currentaction = ""; var memory = 0; function update(x) { if(currentaction == ""){ memory = x; return; } switch(currentaction){ case "add": memory += x; break; case "sub": memory = memory - x; break; case "mul": memory *= x; break; case "div": memory = memory / x; break; default: console.warn("unknown action: " + currentaction); break; } } $(function(){ var $el = $("#result"); $(".sel-action").on("click", function(){ var $this = $(this); var input = parsefloat($el.val()); var action = $this.data("action"); var clearinput = true; switch(action) { case "clr": memory = 0; currentaction = ""; break; case "eql": clearinput = false; update(input); $el.val(memory); currentaction = ""; break; default: update(input); currentaction = action; } if(clearinput) $el.val(""); }); $(".sel-input").on("click", function(){ $el.val($el.val() + $(this).data("value")); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td colspan="4"><input id="result" value="" style="width: 110px" /></td> </tr> <tr> <td><button class="sel-input" data-value="1">1</button></td> <td><button class="sel-input" data-value="2">2</button></td> <td><button class="sel-input" data-value="3">3</button></td> <td><button class="sel-action" data-action="add">+</button></td> </tr> <tr> <td><button class="sel-input" data-value="4">4</button></td> <td><button class="sel-input" data-value="5">5</button></td> <td><button class="sel-input" data-value="6">6</button></td> <td><button class="sel-action" data-action="sub">-</button></td> </tr> <tr> <td><button class="sel-input" data-value="7">7</button></td> <td><button class="sel-input" data-value="8">8</button></td> <td><button class="sel-input" data-value="9">9</button></td> <td><button class="sel-action" data-action="mul">x</button></td> </tr> <tr> <td><button class="sel-action" data-action="clr">c</button></td> <td><button class="sel-input" data-value="0">0</button></td> <td><button class="sel-action" data-action="eql">=</button></td> <td><button class="sel-action" data-action="div">÷</button></td> </tr> </tbody> </table>just friendly warning, if chance homework professors check stackoverflow solutions problems. buyer beware!
Comments
Post a Comment