FCC JavaScript Calculator

Greetings!
I finished rough functional of javascript calculator, but I get:
Uncaught TypeError: Cannot read property 'id' of null (pen.js:28)
And so although I pass all 16 tests, I cant proceed.

As I found, this should be happening when my script runs before html has loaded.
But at js:100 I have componentDidMount() which adds event listener when component is added to the tree, so I suppose this is not where my problem comes from.

My code so far
https://codepen.io/Numinor/pen/mZJVoL?editors=1011

My browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36 OPR/60.0.3255.170.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator/

The click event listener is on the document, which means it reacts to clicks on absolutely anything on the docuemnt. Doesn’t have to be your button. To fix this, add this line to the beginning of handleChange:

if (!e.target.matches('button.btn')) return;

Read this article on how Element.matches works: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches


Also, I noticed your project really needs some styling. freeCodeCamp is here not only to practice JS or React, but also CSS. Make sure you apply some styling sometime too. :wink: :slight_smile: :upside_down_face: :sunglasses:

Thank you very much!
I will definitely read the article.

Yes, I know about styling, but as I said

I finished rough functional of javascript calculator

So the styling will be next.

Hey @Numinor I’d just like to point out something. There isn’t really a reason to add your event listener this way document.addEventListener('click', this.handleChange); you can simply add a onClick method to your buttons.

React largely takes care of events for you, the onClick in JSX isn’t the same as if you where doing it inside HTML,

Second while the test don’t report this as a error, there is a bit of bug that comes from a floating point problem with many languages. To see what I mean you can add 0.1 to 0.2 and what you’d expect to get is 0.3 but instead it is 0.30000000000000004

And last while you can have one monolith of a component, I think it would better to break up you App component into some presentational components, such as a Button component that takes some props since all your Buttons are largely the same aside from one property.

Thank you, I will try to make it better with your suggestions!