[SOLVED] Calculator project - html/css selects button and causes wrong output


Source code



Hi, so my calculator has keyboard support in addition to being able to select the buttons with the mouse. The issue I am having is, when I click on a button (for this example a number), you can see an ‘outline’ on the button… then if I am to use my keyboard for the remainder of the calculation and press enter on my keyboard the display has the correct answer however it adds the number that has the outline on the viewport or if you click clear button and perform a calculation the result ends up being cleared…

Things I have tried to fix it

I’ve searched online and the closest thing I found was how to remove the outline for chrome and firefox

for firefox
button::-moz-focus-inner { border: 0; }

for chrome
button {outline: 0;}

BUT this only gets rid of the outline but behind the scenes I guess you would say, it is still being ‘selected’ and the bug remains…


Does anybody know how I can make the button when clicking it not be ‘selected’ so that if I were to press enter it would not press the button.


I just cloned your repo and it looks like you fixed it, I do not experience the bug you mentioned. But somehow 6+4 = 106.


Did you try disabling the default behavior of the enter key?


That’s the bug, it displays the right answer 10, but when you click enter on the keyboard it also adds the 6 that is outlined to the display making it seem like the answer is 106… If you used your mouse to click 6, +, and 4 and then pressed enter on your keyboard it will display 104 because it adds the 4 button that is being outlined to the end. If you calculate using either all keys or all mouse then it displays the correct answer.


This looks like it fixed the problem, thanks!


That is so cool!:heart_eyes::heart_eyes:
I am just starting the basic 101 but thought it will be better to see other students.
My Question!!
Did you learn this from TOP, I mean the CSS and HTML or other sources as well? If yes can you suggest to me what you did?


I’ve taken intro to web development class in college which taught html and css but it was basic. I also have done the html & css codecademy course as well as Freecodecamp. I would say TOP and freecodecamp are great resources were codecademy is basic. I also own books ‘html & css’ and ‘javascript & jquery’ by Jon Duckett it’s a bit outdated but still helps you learn concepts.