如何通过使用JS在计算器中将计算固定为0？

Question

I am creating a calculator application in javaScript where all arithmetic operations would work (Simple arithmetic calculator). But there is one problem with number 0. If I perform any operation keeping 0 in front of number it's showing wrong output. Again if I perform any operation keeping 0 after a number, it's giving the right answer. Here I have done so far. Please check.

<script>
 function displayNum(n1){
calculator.text1.value = calculator.text1.value + n1;
 }
</script>

<form name="calculator" >
<input type="text" name="text1" style="text-align:right"><br>
<input type="button" name="num2" value=2 onclick="displayNum(num2.value)">
<input type="button" name="num3" value=3 onclick="displayNum(num3.value)">
<input type="button" name="addnum" value=+ onclick="displayNum(addnum.value)"><br>
<input type="button" name="num4" value=4 onclick="displayNum(num4.value)">
<input type="button" name="num5" value=5 onclick="displayNum(num5.value)">
<input type="button" name="num6" value=6 onclick="displayNum(num6.value)">
<input type="button" name="subnum" value=- onclick="displayNum(subnum.value)"><br>
<input type="button" name="num7" value=7 onclick="displayNum(num7.value)">
<input type="button" name="num8" value=8 onclick="displayNum(num8.value)">
<input type="button" name="num9" value=9 onclick="displayNum(num9.value)">
<input type="button" name="mulnum" value=* onclick="displayNum(mulnum.value)"><br>
<input type="reset" name="reset" value=C>
<input type="button" name="num0" value=0 onclick="displayNum(num0.value)">
<input type="button" name="divnum" value=/ onclick="displayNum(divnum.value)">
<input type="button" name="equal" value== onclick="text1.value=eval(text1.value)">
 </form>

If I provide 012+3 as input then output is coming 13 instead of 15, which is incorrect. actual result is 012+3=13 expected result should be 012+3=15

Answer 1

To fix the problem with leading zeros I suggest storing the equation in a hidden input and verifying whether 0 is allowed or not.

let blockLeadingZero = true;
function displayNum(n1){
    calculator.text1.value = calculator.text1.value + n1;
    if(blockLeadingZero && n1 == 0){
        blockLeadingZero = false;
    } else {
        calculator.text2.value = calculator.text2.value + n1;
        if(n1 === "+" || n1 === "-" || 
            n1 === "*" ||n1 === "/"){
            blockLeadingZero = true;
        }
    }
}

Since we will be using a second hidden text field for calculations you also need to change the HTML part a little bit. Delete button now clears the text2 field value and '=' button changes values for both text fields.

<form name="calculator" >
<input type="text" name="text1" style="text-align:right"><br>
<input type="hidden" name="text2" style="text-align:right"><br>
<input type="button" name="num2" value=2 onclick="displayNum(num2.value)">
<input type="button" name="num3" value=3 onclick="displayNum(num3.value)">
<input type="button" name="addnum" value=+ onclick="displayNum(addnum.value)"><br>
<input type="button" name="num4" value=4 onclick="displayNum(num4.value)">
<input type="button" name="num5" value=5 onclick="displayNum(num5.value)">
<input type="button" name="num6" value=6 onclick="displayNum(num6.value)">
<input type="button" name="subnum" value=- onclick="displayNum(subnum.value)"><br>
<input type="button" name="num7" value=7 onclick="displayNum(num7.value)">
<input type="button" name="num8" value=8 onclick="displayNum(num8.value)">
<input type="button" name="num9" value=9 onclick="displayNum(num9.value)">
<input type="button" name="mulnum" value=* onclick="displayNum(mulnum.value)"><br>
<input type="reset" name="reset" value=C onclick="calculator.text2.value=''">
<input type="button" name="num0" value=0 onclick="displayNum(num0.value)">
<input type="button" name="divnum" value=/ onclick="displayNum(divnum.value)">
<input type="button" name="equal" value== onclick="text2.value=eval(text2.value);text1.value=text2.value">
</form>

Answer 2

Found your problem => You are not changing your eval parameter. Change your equal button onclick with mine

onclick="text1.value=eval((text1.value).replace(/\b0(\d+)\b/g, '$1'))"

 function displayNum(n1){ calculator.text1.value = calculator.text1.value + n1; } 

 <form name="calculator" > <input type="text" name="text1" style="text-align:right"><br> <input type="button" name="num1" value=1 onclick="displayNum(num1.value)"> <input type="button" name="num2" value=2 onclick="displayNum(num2.value)"> <input type="button" name="num3" value=3 onclick="displayNum(num3.value)"> <input type="button" name="addnum" value=+ onclick="displayNum(addnum.value)"><br> <input type="button" name="num4" value=4 onclick="displayNum(num4.value)"> <input type="button" name="num5" value=5 onclick="displayNum(num5.value)"> <input type="button" name="num6" value=6 onclick="displayNum(num6.value)"> <input type="button" name="subnum" value=- onclick="displayNum(subnum.value)"><br> <input type="button" name="num7" value=7 onclick="displayNum(num7.value)"> <input type="button" name="num8" value=8 onclick="displayNum(num8.value)"> <input type="button" name="num9" value=9 onclick="displayNum(num9.value)"> <input type="button" name="mulnum" value=* onclick="displayNum(mulnum.value)"><br> <input type="reset" name="reset" value=C> <input type="button" name="num0" value=0 onclick="displayNum(num0.value)"> <input type="button" name="divnum" value=/ onclick="displayNum(divnum.value)"> <input type="button" name="equal" value== onclick="text1.value=eval((text1.value).replace(/\\b0(\\d+)\\b/g, '$1'))"> </form> 

Answer 3

Here is solution for your problem. I have tested example like 0022+3 , 0033*002, 6/003 all are working fine. you need remove leading zeros in text1.value before you eval it. you can use below code

<script>
 function displayNum(n1){
calculator.text1.value = calculator.text1.value + n1;
 }
</script>

<form name="calculator" >
<input type="text" name="text1" style="text-align:right"><br>
<input type="button" name="num2" value=2 onclick="displayNum(num2.value)">
<input type="button" name="num3" value=3 onclick="displayNum(num3.value)">
<input type="button" name="addnum" value=+ onclick="displayNum(addnum.value)"><br>
<input type="button" name="num4" value=4 onclick="displayNum(num4.value)">
<input type="button" name="num5" value=5 onclick="displayNum(num5.value)">
<input type="button" name="num6" value=6 onclick="displayNum(num6.value)">
<input type="button" name="subnum" value=- onclick="displayNum(subnum.value)"><br>
<input type="button" name="num7" value=7 onclick="displayNum(num7.value)">
<input type="button" name="num8" value=8 onclick="displayNum(num8.value)">
<input type="button" name="num9" value=9 onclick="displayNum(num9.value)">
<input type="button" name="mulnum" value=* onclick="displayNum(mulnum.value)"><br>
<input type="reset" name="reset" value=C>
<input type="button" name="num0" value=0 onclick="displayNum(num0.value)">
<input type="button" name="divnum" value=/ onclick="displayNum(divnum.value)">
<input type="button" name="equal" value== onclick="text1.value=eval((text1.value).replace(/\b(0(?!\b))+/g, ''))">
 </form>