JavaScript Calculator Bug!

1

Hey there, I am just about done with my JavaScript calculator project, but I have run into an issue that I am struggling to resolve. I want my calculator to display at most 9 characters, including a ‘-’ and ‘.’, but my trouble is that whenever a minus or a dot is put into my string my function that cuts off the extra characters doesn’t work. Try pressing a button 9 times and you will see that it will cap itself and not overflow. Press the +/- button, or add a decimal in there and it will go on forever. switch it back to positive and it cuts off. I have spent a while on this and I haven’t had any luck. I appreciate the feedback and if you notice anywhere else my code can improve please let me know.
Give a search for this and you will see where I am trying to call the function:
$('#total').html(checkLength(number));

2

I’m just trying to figure out what you’ve asked for, but I’ve found a few other bugs / things you should consider fixing

  1. use user-select: none; in your css style inside your a { } (you won’t be able to select anything while clicking on buttons)
  2. try adding 0.1 + 0.2 (use Math.floor, and round the result)
  3. adding a history log would be cool
    edit2: 4) I cannot change the value to negative when I start with 0.xxx

edit: This kinda solves your problem

  function checkLength(num) {
    if (num.length > 9) {
      return num.substr(0, 9);
    }
    return num;
  }
3
  1. What if clicking on a number only updated number variable if number length was less than 9?
  2. checkLength function could return string 10 characters ( to include the - ) from the END of the string ( substr(-10) )

Try clicking abs button with “1.xxx” (returns “-1”)
I found the parseInt() function rounds in a way you dont want it, just removing it all together solved that issue, but not sure if its creating issues with something else?

  $('#abs').click(function() {
    if (operator !== '-') {
let total = $('#total').html()
//  var makeInt = parseInt($('#total').html());
      if (total > 0) {
        var negative = -Math.abs(total);
        number = negative.toString();
        $('#total').html(checkLength(number));
      } else if (total < 0) {
          var positive = Math.abs(total);
          number = positive.toString();
          $('#total').html(checkLength(number));
      }
    }
  });
4

Thanks for finding the problem with the checkLength function that solved it!. I added user-select: none;. I know that my numbers don’t add right and that seems to be a problem with JavaScript itself and I don’t know a work around. Math.floor doesn’t work because then I won’t get any decimal numbers so I don’t know what to do about that one. A history log would be cool. Could you explain a little more about what you mean by it though and how it would be viewable? Changing the value to negative with a 0.XXX seems to be a problem with Math.abs because it rounds decimals so i’ll try and just throw a ‘-’ in front of the number instead of using that.

5

It’s actually not a JS problem – computers store everything as binary numbers, and there are decimal numbers(with a floating point) that can NOT be expressed precisely. e.g. 0.1 + 0.2

You can simply replace your line with this one:
$('#total').html(result.toFixed(2));

The disadvantage is that EVERYTHING will be shown as X.XX. I believe there are thousands of solutions to this problem.

Sure, have a look at my app click me! It has a history log. My app is pretty simple, I like Bengitter’s calc here