How to fix calculation with 0 in a calculator by using JS?

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

the result of an `` is a string. you need to convert this string to a number. — Nina Scholz, Apr 18 '19 at 07:31
As @NinaScholz already said, use `parseFloat()` to convert into float and `parseInt()` to convert to an integer. — , Apr 18 '19 at 07:33
or use a simple [unary plus `+`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus) in front of the value. — Nina Scholz, Apr 18 '19 at 07:34
[Reason](https://stackoverflow.com/questions/35047982/javascript-0-in-beginning-of-number) why 0 in the beginning of number returns wrong answer. — Cray, Apr 18 '19 at 07:38

score 0 · Answer 1 · answered Apr 18 '19 at 07:59

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>

score 0 · Answer 2 · answered Apr 18 '19 at 08:41

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>

No need to use `eval` . https://javascriptweblog.wordpress.com/2010/04/19/how-evil-is-eval/ — Daut, Apr 18 '19 at 08:45
Can you please explain these portion -replace(/\b0(\d+)\b/g, '$1') — Souradip, Apr 18 '19 at 09:53
@Souradip this is filtering your string 012 => 12. You can find details regular expression definition from here [link](https://regexr.com/) — Jakir Hossen, Apr 18 '19 at 10:11

score 0 · Answer 3 · answered Apr 18 '19 at 10:05

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>

How to fix calculation with 0 in a calculator by using JS?

3 Answers3