制作一个 JavaScript 计算器

Question

I'm trying to build a calculator on the web and I have problems with algebraic operations.

 //function for operations function risultato(arg) { var a = parseInt(document.getElementById('display').value); alert(a); var b = 4; somma(a, b); /*if(document.getElementById("x").value == "x") { moltiplicazione(a, b); }*/ } function somma(a,b) { document.getElementById("risultato").value = eval(a+b); var display = document.getElementById("display"); display.innerHTML = a+b; } function moltiplicazione(a,b) { document.getElementById("risultato").value = eval(a*b); var display = document.getElementById("display"); display.innerHTML = a*b; } function sottrazione(a,b) { document.getElementById("risultato").value = eval(ab); var display = document.getElementById("display"); display.innerHTML = ab; } function divisione(a,b) { document.getElementById("risultato").value = eval(a/b); var display = document.getElementById("display"); display.innerHTML = a/b; } //function for reset function reset() { var display = document.getElementById("display"); if (display.innerHTML != "AC" ) { display.innerHTML = 0; } } //function for digit number function digit(arg) { var display = document.getElementById("display"); if (display.innerHTML == 0 ) { if (arg.innerHTML != 0) { display.innerHTML = arg.innerHTML; } } else { display.innerHTML = parseInt(display.innerHTML)*10 + parseInt(arg.innerHTML); } }

 <div class="calculator" id="grid-snap"> <div class="display" id="display" > 0 </div> <div class="operator1" onClick="reset(this)"> AC </div> <div class="operator1"> +/- </div> <div class="operator1"> % </div> <div class="operator2" onclick="divisione()"> / </div> <div class="digit" onClick="digit(this);"> 7 </div> <div class="digit" onClick="digit(this);"> 8 </div> <div class="digit" onClick="digit(this);"> 9 </div> <div class="operator2" value="x" id="x" onclick="moltiplicazione()"> x </div> <div class="digit" onClick="digit(this);"> 4 </div> <div class="digit" onClick="digit(this);"> 5 </div> <div class="digit" onClick="digit(this);"> 6 </div> <div class="operator2" onclick="sottrazione()"> - </div> <div class="digit" value="1" onClick="digit(this);" id="1" > 1 </div> <div class="digit" onClick="digit(this);" id="2"> 2 </div> <div class="digit" onClick="digit(this);" > 3 </div> <div class="operator2" value="+" id="+" onclick="somma();" > + </div> <div class="digit big" onClick="digit(this);"> 0 </div> <div class="digit"> , </div> <div class="operator2" type="button" value="=" id="risultato" onclick="risultato();" > = </div> </div>

Regarding the writing of numbers and the cancellation I have no problems. Could someone give me some advice on how to do the operations? thank you

Answer 1

1) use input instead editable div (if you are the beginner)

2) add a variable that stores previous value called previous

3) numeric button should store it's value in variable called current

4) on operation button click just take previous & current and perform chosen operation on them

5) pass exact numeric or operational value in your function doOperation('sum'), doOperation('divide') etc. enterDigit(1), enterDigit(5) etc. Instead of using this. You anyway misuse it, passing exact values is simpler for the beginning.

sometimes you only need to enter value (digit entered), sometimes you need to calculate (if previous value exists and user clicks operation button)

Sometimes only calculate (equal clicked)

It seems you completely confused about what you are doing. If you trying to evaluate operation in display which actually should only display previous input or previous result or current input not evaluate anything

I would check existing tutorials better. ex

PS: name your variables and functions in english

PPS: You will definitely have problems with big numbers calculations. :) It's quite complex. Read this if you are interested in http://2ality.com/2012/07/large-integers.html