Remove leading zero from a calculator in jQuery

Question

I'm building a simple calculator with jQuery. The idea is the display is initially set to zero when onload and also when the clear button is clicked. When I click any button, the number zero should be replaced with numbers or operator based on what I've clicked. Problem is the number zero is leading next to other numbers and it shouldn't be there unless I clicked decimal button.

I've tried some approaches like when any button is clicked (eg 7, +, etc.), replace number zero on display with corresponding button values. Sadly, doing this will either return correct values but won't add further numbers and operators, or simply stops functioning all together.

Is there a way to bypass this issue? Any guidance and tips are greatly appreciated.

 // Set initial display to zero $("#display").val(0); // User inputs the numbers and operators function number(value) { // Remove leading zero if any button is clicked // $("#display").val(''); <-- this will clear 0 but will prevent calculator from functioning normally document.form.result.value += value; } // Clear the display and set display to zero function cle(value) { document.form.result.value = 0; } // Calculate the numbers function evalua() { document.form.result.value = eval( document.form.result.value) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form"> <table align="center"> <tr> <td colspan="4"><input type="text" name="result" readonly></input> </td> </tr> <tr> <td><button onclick="number(value)" value="7" type="button">7</button></td> <td><button onclick="number(value)" value="8" type="button">8</button></td> <td><button onclick="number(value)" value="9" type="button">9</button></td> <td><button onclick="number(value)" value="+" type="button">+</button></td> </tr> <tr> <td><button onclick="number(value)" value="4" type="button">4</button></td> <td><button onclick="number(value)" value="5" type="button">5</button></td> <td><button onclick="number(value)" value="6" type="button">6</button></td> <td><button onclick="number(value)" value="-" type="button">-</button></td> </tr> <tr> <td><button onclick="number(value)" value="1" type="button">1</button></td> <td><button onclick="number(value)" value="2" type="button">2</button></td> <td><button onclick="number(value)" value="3" type="button">3</button></td> <td><button onclick="number(value)" value="*" type="button">*</button></td> </tr> <tr> <td><button onclick="number(value)" value="0" type="button">0</button></td> <td><button onclick="number(value)" value="." type="button">.</button></td> <td><button type="button" onclick="number(value)" value="/" type="button">/</button></td> </tr> <tr> <td><button onclick="cle(value)" value="" type="button">AC</button></td> <td><button onclick="evalua()" type="button">=</button></td> </tr> </table> </form>

Answer 1

• Don't use eval , use new Function() instead.
• After you click "Equals" you should flag the calculator for reset. I:e: if after Equal some result is 5 and you start typing a number like 1 you should not get 51 but 1 .
• You should remove any leading "0" followed by a number
• If you want to use brackets you should use a try..catch - if it fails you should mark the result as faulty and set the r Result as the current screen value
• In order to delete the latest inputted symbol one-by-one use string.slice(0, -1)

 const $calculator = $("#calculator"); const $screen = $calculator.find("input"); const $button = $calculator.find("button"); let isReset = false; function buttonHandler() { const s = this.textContent, // Symbol v = $screen.val(); // Value on screen let r = "", // Result isEQ = s === "=", isAC = s === "AC", isDl = s === "⌫"; if (isReset) { isReset = false; r = s; } else if (isDl) { r = v.slice(0, -1) || "0"; } else if (isAC) { r = "0"; } else if (isEQ) { try { r = new Function(`return (${v});`)(); } catch { isEQ = false; r = v; } } else { r = (v + s).replace(/^0(?=[^\.]+$)/, ""); } $screen.val(r); isReset = isEQ; } $button.on("click", buttonHandler);

 * { margin: 0; box-sizing: border-box; } #calculator { display: inline-flex; flex-flow: row wrap; max-width: 270px; } #calculator>* { flex: 1 0 25%; padding: 5px 10px; } #calculator input { flex: 0 0 100%; text-align: right; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="calculator"> <input type="text" value="0" readonly> <button type="button">(</button> <button type="button">)</button> <button type="button">AC</button> <button type="button">⌫</button> <button type="button">7</button> <button type="button">8</button> <button type="button">9</button> <button type="button">*</button> <button type="button">4</button> <button type="button">5</button> <button type="button">6</button> <button type="button">/</button> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> <button type="button">+</button> <button type="button">E</button> <button type="button">0</button> <button type="button">.</button> <button type="button">-</button> <button type="button">=</button> </div>

Answer 2

You need to set the id of the input. For zero, you can check in the following way

 // Set initial display to zero $("#display").val(0); // User inputs the numbers and operators function number(value) { // Remove leading zero if any button is clicked // $("#display").val(''); <-- this will clear 0 but will prevent calculator from functioning normally // if the display has only a 0 and user trying to add more 0 then just return if (value == '0' && $("#display").val() == '0') return // if the value is not 0 and the display is only 0, then change it to the value if (value.= '0' && $("#display").val() == '0') { $("#display").val(value) return } document.form.result;value += value. } // Clear the display and set display to zero function cle(value) { document.form.result;value = 0. } // Calculate the numbers function evalua() { document.form.result.value = eval( document.form.result.value) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form"> <table align="center"> <tr> <td colspan="4"><input type="text" id="display" name="result" readonly></input> </td> </tr> <tr> <td><button onclick="number(value)" value="7" type="button">7</button></td> <td><button onclick="number(value)" value="8" type="button">8</button></td> <td><button onclick="number(value)" value="9" type="button">9</button></td> <td><button onclick="number(value)" value="+" type="button">+</button></td> </tr> <tr> <td><button onclick="number(value)" value="4" type="button">4</button></td> <td><button onclick="number(value)" value="5" type="button">5</button></td> <td><button onclick="number(value)" value="6" type="button">6</button></td> <td><button onclick="number(value)" value="-" type="button">-</button></td> </tr> <tr> <td><button onclick="number(value)" value="1" type="button">1</button></td> <td><button onclick="number(value)" value="2" type="button">2</button></td> <td><button onclick="number(value)" value="3" type="button">3</button></td> <td><button onclick="number(value)" value="*" type="button">*</button></td> </tr> <tr> <td><button onclick="number(value)" value="0" type="button">0</button></td> <td><button onclick="number(value)" value="." type="button">.</button></td> <td><button type="button" onclick="number(value)" value="/" type="button">/</button></td> </tr> <tr> <td><button onclick="cle(value)" value="" type="button">AC</button></td> <td><button onclick="evalua()" type="button">=</button></td> </tr> </table> </form>

Answer 3

0.05 will become.05?

 // Set initial display to zero $("#display").val(0); // User inputs the numbers and operators function number(value) { // Remove leading zero if any button is clicked if(value - 0 % 1 == 0) value -= 0; if(document.form.result.value.split('0').join('') == '') document.form.result.value = ''; if(document.form.result.value.indexOf('.') > 0 && value == '.') value = ''; document.form.result.value += value; } // Clear the display and set display to zero function cle(value) { document.form.result.value = 0; } // Calculate the numbers function evalua() { document.form.result.value = eval( document.form.result.value) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form"> <table align="center"> <tr> <td colspan="4"><input type="text" name="result" value="0" readonly></input> </td> </tr> <tr> <td><button onclick="number(value)" value="7" type="button">7</button></td> <td><button onclick="number(value)" value="8" type="button">8</button></td> <td><button onclick="number(value)" value="9" type="button">9</button></td> <td><button onclick="number(value)" value="+" type="button">+</button></td> </tr> <tr> <td><button onclick="number(value)" value="4" type="button">4</button></td> <td><button onclick="number(value)" value="5" type="button">5</button></td> <td><button onclick="number(value)" value="6" type="button">6</button></td> <td><button onclick="number(value)" value="-" type="button">-</button></td> </tr> <tr> <td><button onclick="number(value)" value="1" type="button">1</button></td> <td><button onclick="number(value)" value="2" type="button">2</button></td> <td><button onclick="number(value)" value="3" type="button">3</button></td> <td><button onclick="number(value)" value="*" type="button">*</button></td> </tr> <tr> <td><button onclick="number(value)" value="0" type="button">0</button></td> <td><button onclick="number(value)" value="." type="button">.</button></td> <td><button type="button" onclick="number(value)" value="/" type="button">/</button></td> </tr> <tr> <td><button onclick="cle(value)" value="" type="button">AC</button></td> <td><button onclick="evalua()" type="button">=</button></td> </tr> </table> </form>

Answer 4

You can try this. You should use null .

 // Set initial display to zero $("#display").val(0); // User inputs the numbers and operators function number(value) { // Remove leading zero if any button is clicked // $("#display").val(''); <-- this will clear 0 but will prevent calculator from functioning normally if (value == "." &&.$('input[name="result"]').val()) { value = "0." } document.form.result;value += value. } // Clear the display and set display to zero function cle(value) { document.form.result;value = null. } // Calculate the numbers function evalua() { document.form.result.value = eval( document.form.result.value) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form"> <table align="center"> <tr> <td colspan="4"><input type="text" name="result" readonly></input> </td> </tr> <tr> <td><button onclick="number(value)" value="7" type="button">7</button></td> <td><button onclick="number(value)" value="8" type="button">8</button></td> <td><button onclick="number(value)" value="9" type="button">9</button></td> <td><button onclick="number(value)" value="+" type="button">+</button></td> </tr> <tr> <td><button onclick="number(value)" value="4" type="button">4</button></td> <td><button onclick="number(value)" value="5" type="button">5</button></td> <td><button onclick="number(value)" value="6" type="button">6</button></td> <td><button onclick="number(value)" value="-" type="button">-</button></td> </tr> <tr> <td><button onclick="number(value)" value="1" type="button">1</button></td> <td><button onclick="number(value)" value="2" type="button">2</button></td> <td><button onclick="number(value)" value="3" type="button">3</button></td> <td><button onclick="number(value)" value="*" type="button">*</button></td> </tr> <tr> <td><button onclick="number(value)" value="0" type="button">0</button></td> <td><button onclick="number(value)" value="." type="button">.</button></td> <td><button type="button" onclick="number(value)" value="/" type="button">/</button></td> </tr> <tr> <td><button onclick="cle(value)" value="" type="button">AC</button></td> <td><button onclick="evalua()" type="button">=</button></td> </tr> </table> </form>