html - Simple mathematical Calculator using jquery -


this code , want use pressing keys on keyboard , simple solution same helpful. should able perform multiple calculation. eg. 2+2+ -> 4+2+ -> 6+2= ->8.

html:

<div id="main">      <h2>simple calculator</h2>      <input id="result" type="number" />     <div id="keys">         <div id="firstrow">             <button id="clearall" type="reset" value="ce" class="clean">ce</button>             <button id="clear" type="reset" value="c" class="clean">c</button>             <button id="add" type="button" value="+" class="operators operand">+</button>         </div>         <div id="secondrow">             <button id="one" type="button" value="1" class="show">1</button>             <button id="two" type="button" value="2" class="show">2</button>             <button id="three" type="button" value="3" class="show">3</button>             <button id="sub" type="button" value="-" class="operators operand">-</button>         </div>         <div id="thirdrow">             <button id="four" type="button" value="4" class="show">4</button>             <button id="five" type="button" value="5" class="show">5</button>             <button id="six" type="button" value="6" class="show">6</button>             <button id="mul" type="button" value="*" class="operators operand">*</button>         </div>         <div id="fourthrow">             <button id="seven" type="button" value="7" class="show">7</button>             <button id="eight" type="button" value="8" class="show">8</button>             <button id="nine" type="button" value="9" class="show">9</button>             <button id="divide" type="button" value="/" class="operators operand">/</button>         </div>         <div id="fifthrow">             <button id="zero" type="button" value="0" class="show">0</button>             <button id="dot" type="button" value="." class="show">.</button>             <button id="calculate" type="button" value="=" class="operand">=</button>         </div>     </div> </div> 

jquery:

$("document").ready(function () {     var key = null;      $(".clean").click(function () {         $('input').text("");     });      $(".show").click(function () {         var etext = $('#result').val();         if (etext != "0") {             var val1 = etext;             var buttonval = $(this);             var val2 = buttonval.text();             var res = val1 + val2;             $('#result').val(res);         } else {             $('#result').val()         }     });      $(function () {         var interres = null;         var operator;         $('.operators').click(function () {             var value1 = $('#result').val();             if (interres != null) {                 var result = applyoperation(interres, value1, operator);                 interres = result;             } else {                 interres = value1;             }             operator = $(this).text();             $('input').val("");         });          $('#calculate').click(function () {             var op = operator;             var res;             var value2 = $('#result').val();             if (value2 != "") {                 res = applyoperation(interres, value2, op);             } else {                 res = interres;             }             $('#result').val(res);             interres = null;         });     });      function applyoperation(value1, value2, operator) {         var res;         switch (operator) {             case "+":                 res = addition(value1, value2);                 break;             case "-":                 res = subtraction(value1, value2);                 break;             case "*":                 res = multiplication(value1, value2);                 break;             case "/":                 res = division(value1, value2);                 break;         }         return res;     }      function addition(first, second) {         var = parsefloat(first);         var b = parsefloat(second);         var total = + b;         return total;     }      function subtraction(first, second) {         var = parsefloat(first);         var b = parsefloat(second);         var sub = - b;         return sub;     }      function multiplication(first, second) {         var = parsefloat(first);         var b = parsefloat(second);         var product = * b;         return product;     }      function division(first, second) {         var = parsefloat(first);         var b = parsefloat(second);         var divi = / b;         return divi;     } }); 

take @ jsfiddle demo,i have updated code changes. working fine both keyboard , clicking on buttons.

    $('#result').keypress(function (e) {         if ((e.keycode == 61)) {             var op = operator;             var res;             var value2 = $('#result').val();             if ((value2 != "")) {                 var data = value2.split("+");                 if (data.length > 2) res = applyoperation(interres, data[data.length - 1], op);                 else res = applyoperation(interres, data[1], op);             } else {                 res = interres;             }             $('#result').val(res);             interres = null;         } else if ((e.keycode == 43) || (e.keycode == 45) || (e.keycode == 42) || (e.keycode == 47)) {             var value1 = $('#result').val();             var inter = (interres != null);             if (inter) {                 var op = operator;                 var data = value1.split("+");                 if (data.length > 2) {                     operator = string.fromcharcode(e.keycode);                     result = applyoperation(interres, data[data.length - 1], op);                     interres = result;                 } else {                     operator = string.fromcharcode(e.keycode);                     result = applyoperation(interres, data[1], op);                     interres = result;                 }             } else {                 interres = value1;             }             operator = string.fromcharcode(e.keycode);             $('.input').text("");         }     }); 

i hope more.


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -