stackoom
  简体   繁体   中英

Decimal issue with calculator

 原文  2017-10-11 05:30:56  4   5    javascript

Question

My calculator can't keep long decimals within the output screen (ie 1/3). I have tried to convert result into a number using parseFloat then use Math. round, then toString to convert back the result into string and display it on the screen, but it did not work. Please help!!! 

 $(document).ready(function() { var testNumLength = function(number) { if (number.length > 9) { totaldiv.text(number.substr(number.length - 9, 9)); if (number.length > 15) { number = ""; totaldiv.text("Err"); } } }; var entry = ""; var current = ""; //after operator is entered var operator = ""; var res = ""; var totaldiv = $("#total"); totaldiv.text("0"); $("#numbers a").not("#clear,#clearall").click(function() { entry += $(this).text(); //take the text of the numbers when clicked and append it to var entry //display input1 on screen totaldiv.html(entry); testNumLength(entry); }) $("#clear,#clearall").click(function() { entry = ""; if ($(this).attr("id") === "clearall") { current = ""; } totaldiv.text("0"); }) $("#operators a").click(function() { //append operators to var operator operator = $(this).text(); current = entry; entry = ""; }) $("#decimal").click(function() { //var numOfDecs = 0; for (var i = 0; i < entry.length; i++) { if (entry.indexOf(".") == -1) { entry += "."; // numOfDecs += 1; } } totaldiv.text(entry); testNumLength(entry); }) $("#equals").click(function() { var result = eval(current + operator + entry); entry = result; testNumLength(result); totaldiv.html(result); }) }) 
 body, div, a { padding: 0; margin: 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } #calculator { width: 310px; height: 460px; margin: 10px auto; padding: 5px; background-color: maroon; border-radius: 10px; border: 3px solid black; } #total { height: 70px; width: 300px; margin: 0; margin-bottom: 5px; padding: 0 5px; background-color: #FFF; text-align: right; font-size: 60px; } #numbers, #operators { margin: auto; } a { cursor: pointer; } #operators a { display: block; width: 46px; height: 45px; float: left; padding: 2px; margin: 5px; text-align: center; text-decoration: none; color: black; font-size: 39px; background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC)); background: -moz-linear-gradient(top, #EDEDED, #DCDCDC); border-radius: 10px; } #numbers a { display: block; float: left; color: black; font-size: 43px; text-decoration: none; width: 50px; height: 50px; padding: 10px; margin: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC)); background: -moz-linear-gradient(top, #EDEDED, #DCDCDC); border-radius: 10px; } #side { width: 49px; float: right; } #side a { border-radius: 10px; text-align: center; width: 40px; height: 40px; float: right; font-size: 32px; padding: 10px; margin: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC)); background: -moz-linear-gradient(top, #EDEDED, #DCDCDC); } a#equals { padding-top: 50px; height: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="calculator"> <div id="total"> </div> <div id="operators"> <a id="plus">+</a> <a id="minus">-</a> <a id="divide">/</a> <a id="times">*</a> </div> <div id="side"> <a id="sq">^</a> <a id="sqrt">√</a> <a id="decimal">.</a> <a id="equals">=</a> </div> <div id="numbers"> <a id="clear">C</a> <a id="clearall">AC</a> <a id=>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>0</a> </div> </div> </body>

5 answers

solution1
 0  2017-10-11 05:37:24

totaldiv.html(result.toFixed(6));

Try to use toFixed(n) .

You can slice your result number.

solution2
 0  2017-10-11 05:39:23

  • If it's about the display - change the div containing the output number (the "total") to have CSS style of "overflow:hidden"

  • If it's about the way you handle numbers, you can round these numbers a bit. On Calculla we use simple approach: if you want numbers to be no longer than let's say 2 ciphers after comma (like 10.33 instead of unlimited 333333....) then to this:

    let outNumber = Math.round(inNumber * 100) / 100;

    It's not a perfect solution, but it's simple and generally works. This is a bit different in results from simply using "toFixed(2)", but I'll leave it to you to discover how.

solution3
 0 ACCPTED  2017-10-11 05:39:54

You can use toFixed to limit the number of digits after the decimal point. So 0.333333333333333 with toFixed(2) will return 0.33 .

In addition to that you need to account for the digits before the decimal. So you need to calculate the digits before the decimal point, and ensure that the length of the entire number does not exceed 9 digits. It can be done like so: 

var integerPortionLength = result.toFixed(0).length;
totaldiv.html(result.toFixed(9 - integerPortionLength));

Here's the updated pen: https://codepen.io/anon/pen/JrZKxd?editors=0010

solution4
 0  2017-10-11 05:42:01

try toFixed() method for that

totaldiv.html(result.toFixed(2)); 

 $(document).ready(function() { var testNumLength = function(number) { if (number.length > 9) { totaldiv.text(number.substr(number.length - 9, 9)); if (number.length > 15) { number = ""; totaldiv.text("Err"); } } }; var entry = ""; var current = ""; //after operator is entered var operator = ""; var res = ""; var totaldiv = $("#total"); totaldiv.text("0"); $("#numbers a").not("#clear,#clearall").click(function() { entry += $(this).text(); //take the text of the numbers when clicked and append it to var entry //display input1 on screen totaldiv.html(entry); testNumLength(entry); }) $("#clear,#clearall").click(function() { entry = ""; if ($(this).attr("id") === "clearall") { current = ""; } totaldiv.text("0"); }) $("#operators a").click(function() { //append operators to var operator operator = $(this).text(); current = entry; entry = ""; }) $("#decimal").click(function() { //var numOfDecs = 0; for (var i = 0; i < entry.length; i++) { if (entry.indexOf(".") == -1) { entry += "."; // numOfDecs += 1; } } totaldiv.text(entry); testNumLength(entry); }) $("#equals").click(function() { var result = eval(current + operator + entry); entry = result; testNumLength(result); totaldiv.html(result.toFixed(2)); }) }) 
 body, div, a { padding: 0; margin: 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } #calculator { width: 310px; height: 460px; margin: 10px auto; padding: 5px; background-color: maroon; border-radius: 10px; border: 3px solid black; } #total { height: 70px; width: 300px; margin: 0; margin-bottom: 5px; padding: 0 5px; background-color: #FFF; text-align: right; font-size: 60px; } #numbers, #operators { margin: auto; } a { cursor: pointer; } #operators a { display: block; width: 46px; height: 45px; float: left; padding: 2px; margin: 5px; text-align: center; text-decoration: none; color: black; font-size: 39px; background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC)); background: -moz-linear-gradient(top, #EDEDED, #DCDCDC); border-radius: 10px; } #numbers a { display: block; float: left; color: black; font-size: 43px; text-decoration: none; width: 50px; height: 50px; padding: 10px; margin: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC)); background: -moz-linear-gradient(top, #EDEDED, #DCDCDC); border-radius: 10px; } #side { width: 49px; float: right; } #side a { border-radius: 10px; text-align: center; width: 40px; height: 40px; float: right; font-size: 32px; padding: 10px; margin: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC)); background: -moz-linear-gradient(top, #EDEDED, #DCDCDC); } a#equals { padding-top: 50px; height: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="calculator"> <div id="total"> </div> <div id="operators"> <a id="plus">+</a> <a id="minus">-</a> <a id="divide">/</a> <a id="times">*</a> </div> <div id="side"> <a id="sq">^</a> <a id="sqrt">√</a> <a id="decimal">.</a> <a id="equals">=</a> </div> <div id="numbers"> <a id="clear">C</a> <a id="clearall">AC</a> <a id=>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>0</a> </div> </div> </body>

solution5
 0  2017-10-11 05:42:58

A CSS Only Solution 

  #total {
      ....
      overflow: hidden;
      text-overflow: ellipsis;
  }


 $(document).ready(function() { var testNumLength = function(number) { if (number.length > 9) { totaldiv.text(number.substr(number.length - 9, 9)); if (number.length > 15) { number = ""; totaldiv.text("Err"); } } }; var entry = ""; var current = ""; //after operator is entered var operator = ""; var res = ""; var totaldiv = $("#total"); totaldiv.text("0"); $("#numbers a").not("#clear,#clearall").click(function() { entry += $(this).text(); //take the text of the numbers when clicked and append it to var entry //display input1 on screen totaldiv.html(entry); testNumLength(entry); }) $("#clear,#clearall").click(function() { entry = ""; if ($(this).attr("id") === "clearall") { current = ""; } totaldiv.text("0"); }) $("#operators a").click(function() { //append operators to var operator operator = $(this).text(); current = entry; entry = ""; }) $("#decimal").click(function() { //var numOfDecs = 0; for (var i = 0; i < entry.length; i++) { if (entry.indexOf(".") == -1) { entry += "."; // numOfDecs += 1; } } totaldiv.text(entry); testNumLength(entry); }) $("#equals").click(function() { var result = eval(current + operator + entry); entry = result; testNumLength(result); totaldiv.html(result); }) }) 
 body, div, a { padding: 0; margin: 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } #calculator { width: 310px; height: 460px; margin: 10px auto; padding: 5px; background-color: maroon; border-radius: 10px; border: 3px solid black; } #total { height: 70px; width: 300px; margin: 0; margin-bottom: 5px; padding: 0 5px; background-color: #FFF; text-align: right; font-size: 60px; overflow: hidden; text-overflow: ellipsis; } #numbers, #operators { margin: auto; } a { cursor: pointer; } #operators a { display: block; width: 46px; height: 45px; float: left; padding: 2px; margin: 5px; text-align: center; text-decoration: none; color: black; font-size: 39px; background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC)); background: -moz-linear-gradient(top, #EDEDED, #DCDCDC); border-radius: 10px; } #numbers a { display: block; float: left; color: black; font-size: 43px; text-decoration: none; width: 50px; height: 50px; padding: 10px; margin: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC)); background: -moz-linear-gradient(top, #EDEDED, #DCDCDC); border-radius: 10px; } #side { width: 49px; float: right; } #side a { border-radius: 10px; text-align: center; width: 40px; height: 40px; float: right; font-size: 32px; padding: 10px; margin: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC)); background: -moz-linear-gradient(top, #EDEDED, #DCDCDC); } a#equals { padding-top: 50px; height: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="calculator"> <div id="total"> </div> <div id="operators"> <a id="plus">+</a> <a id="minus">-</a> <a id="divide">/</a> <a id="times">*</a> </div> <div id="side"> <a id="sq">^</a> <a id="sqrt">√</a> <a id="decimal">.</a> <a id="equals">=</a> </div> <div id="numbers"> <a id="clear">C</a> <a id="clearall">AC</a> <a id=>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>0</a> </div> </div> </body>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Decimal to Fraction Calculator Javascript Issue Only 1 decimal in a JavaScript calculator? Adding Decimal to calculator Decimal to Binary Calculator Calculator Regex Decimal Javascript Binary to Decimal Calculator Inputting a decimal using a button(Calculator GPA Calculator Math Issue Javascript Multiplication issue in Calculator Issue with adding num to calculator
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM