Help with calculator?

Help with calculator?
0.0 0

#1

Here is the codepen:

I don’t understand why my delete all button isn’t working any why when I clear back all the way none of the buttons work anymore and I have to refresh the page. Please someone help!


#2

Hello. Use this: $("#output").empty();
update();


#3

This is how your js code regarding AC button should look like:
$(“a”).on(“click”, function(){
if(this.id===“deleteAll”){
$("#output").empty();
update();
}


#4

The problem is with the inputs variable initialization. You have initialized it with const which says the you cannot change it once written. But in a calculator we are changing the inputs array as we are applying the equals. Change

const inputs = [''];

to

var inputs = [''];

And everything will work fine


#5

To clarify, I used empty() method to clear everything in the “output” identificator. You shouldn’t have used this to clear the div: inputs=[""]; because it won’t work


#6

Thank you SO SO MUCH! One more question for you…why when I hit CE too many times, then none of the buttons work and I have to refresh?


#7

I appreciate your help, but mohitsharma23 made the answer much easier. Still having trouble with my “CE” or “backOne” button. If I press it too many times, none of the buttons work. It may have to do with .pop() but I’m not so sure.


#8

I am not able to figure out why the CE button is doing that and I noticed one more bug that your calculator allows multiple . to be pushed into the inputs array. Will try something and if I can figure out, I will tell you. :slight_smile:


#9

Yes, those are the two issues bugging me currently and stopping me from styling this ugly calculator, haha!

Thank you so much for your time and teachings.


#10

Here is how I solved the issue with CE button:

else if(this.id===“backOne”){

  if($("#steps").text().length == 0){
     update();
     }
     else{
     inputs.pop();
       update();
     }
}

#11

try it out, hope that helps :smiley:


#12

I love you hahaha! What is the .text() for though? I was trying to mess with == 0 but couldn’t get it quite right. What was your reasoning? Also, can you figure out the multiple decimal point problem?


#13

text() method checks whether a text of a particular element contains symbols or not. Here is how to tackle this issue: we need to continue pop() method UNTIL you have NOTHING in the “steps” element. When you have nothing in this element, you do nothing and code just updates. That’s it.


#14

Sure, working now on the second issue.


#15

So, I think I figured it out by adding " . " to const operators1 at the top as well as having it in const operators2.

I’m not sure if it completely breaks the code, but it’s curious to me. Also, do you know if the answer is too big for the screen, how can I make it so that output box is responsive to the output?

EDIT: NEVERMIND, that only stops from being able to use a decimal. 10 + .3 = 13 in that case.


#16

I don’t know how to limit number of characters to 8 (usually in calculators the max is 8), but I think you could use these css styles to improve it:

#output{
overflow: hidden;
}
#steps{
padding-left: 15px;
}


#17

overflow: hidden is used to hide everything that goes larger than the block itself


#18

So, this way you have a maximum of 12 characters :smiley:


#19

Thanks a lot for that!