Calculator - Strange issue with JavaScript eval() and leading zero

Question

I’m working on a Calculator app. I'm collecting the numbers (1,2,3…) and operators (+,-,*,/, =) as parameters from html onclick method and using eval() in JavaScript to compute the expression. Something like this..

<button type="submit" class="button-style" onclick="myfunc('7')" id="seven"> 7 </button>    
<button type="submit" class="button-style" onclick="myfunc('8')" id="eight"> 8 </button>    
<button type="submit" class="button-style" onclick="myfunc('9')" id="nine"> 9 </button>

My JavaScript file:-

function myfunc(para) {
  if (para != "=" && para != "AC" && para != "ERS" && para != "+/-") {
    document.getElementById("user-input").innerHTML += para;
    document.getElementById("user-input").style.display = "block";
  } else if (para === "ERS") {
    document.getElementById("user-input").innerHTML = document
      .getElementById("user-input")
      .innerHTML.slice(0, -1);
  } else if (para === "AC") {
    document.getElementById("user-input").innerHTML = " ";
    document.getElementById("result").innerHTML = " ";
  } else if (para === "+/-") {
    let newvar = document.getElementById("user-input").innerHTML;
    let anothervar = newvar * -1;
    document.getElementById("user-input").innerHTML = anothervar;
  } else {
    let evaldata = document.getElementById("user-input").innerHTML;
    let newevaldata = evaldata.replace(/^0+/, ""); //Omitting the leading zeroes
    let resultData = eval(newevaldata);
    let num = resultData.toFixed(2);
    document.getElementById("result").innerHTML = num;
  }
}

And this is how the calculator looks like:- Calculator

My question:

Everything is working fine except one strange issue.
Whenever I try to add 010+100 it shows the result as 108
or if I try 0000010+1000 the result is 1008, or 0023+3200 gives 3219.

How is that possible and how to omit the preceding zeroes, I have tried with a regular expression but it doesn't work. Without having preceding zeros the app works just fine. I am stuck here. Please help me out. Thanks.

Here is a screenshot:- calculation error

Answer 1

Remove leading zeroes from numbers in a mathematical operation using this helper function:

const cleanNum = (str) => str.replace(/\d*(\.\d+)?/g, n => n && +n);

Example:

const cleanNum = (str) => str.replace(/\d*(\.\d+)?/g, n => n && +n);

const userStr = "1e2 - 0011 + 0.1100 * 00.0001 -0+ -0 / (001 + 010 + 000) - 00100";
const clean = cleanNum(userStr); // 1e2 - 11 + 0.11 * 0.0001 -0+ -0 / (1 + 10 + 0) - 100

console.log(clean);

const result = new Function(`return (${clean})`)();

console.log(result); // -10.999989

And now some additional info:

Never use eval. It's considered evil specially from a user-input — since it evaluates inside the browser any user-submitted value.

Use new Function instead.

Although (as mistakenly suggested) being an issue of parseInt() — it's not.
parseInt("010") will return the correctly expected 10₁₀ (base 10) in all modern browsers. There's a deprecation of 0-prefixed octal literals in strict-mode which can be seen at work by specifically using parseInt, as seen.

The issue is strictly with the 010 Octal representation due to the leading 0 — in "sloppy mode"

console.log(010) // 8

You could adhere to a more battle-proof syntax by using Strict Mode (or by using module type)

"use strict"
console.log(010) // Uncaught SyntaxError: Octal literals are not allowed in strict mode

eval("010 + 100") evaluates the first operand 010 as octal (value 8 in decimal), resulting in 8 + 100. Just like doing i.e: parseInt("011", 8) === 9; // true by using intentionally the radix 8.

Even if suggested to use new Function - the issue still remains true

"use strict";
console.log(new Function("return (010 + 100);")()) // 108 

therefore: it's your job as a developer to:
get rid of any leading "0" from your String before passing them to new Function.

---

Finally, back to your specific code:

• Use new Function instead of evil (OK, you got that one by now)
• <button type="submit" should be <button type="button"
• Don't use HTML-inline on* handlers like onclick="myfunc('1')". JS should be in one place only, and that's the respective <script> tag or file. Use Element.addEventListener() instead.
• Don't use document.getElementById("user-input").innerHTML from a contenteditable element. Contenteditable is a total browser mess and we're still waiting for a better API to emerge - and it's an unreliable. Use document.getElementById("user-input").value instead, from an <input> Element.
• Cache your elements you're planning to reuse beforehand. Querying the DOM on every button click might result in a poor user experience (and a laggy calculator).
• Don't use IDs in HTML, JS. Imagine you want many calculators (as components) in a single page; by using IDs in multiple places could raise unwanted bugs singe ID is supposed to be unique.