So, I’m reasonably new and completely stuck on the JavaScript calculator in the React/Redux module.
I’ve studied some other submissions and tried to give it my own spin. I’m using React hooks, but either through my own ignorance or the structure of the questions or both it’s passing 1-10 but no higher.
The “uncaught type error” would appear to be a clue, but after a lot of searching I’m still not sure how to fix it.
Thanks in advance for your help, suggestions and comments.
My codepen is below:
Right. The full text is:
Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
What that is saying is that JS “threw” and error that was not “caught” (which you can do with a try/catch block). It is saying that you are trying to read someVariable.innerText and someVariable is undefined. That is a big no no in JS. You can never try to access a property of null or undefined.
When I open up the browser dev tools and look in the console (something you should have open while developing), I see that this error happens whenever I clear and then press a number … and then hit an operator.
On a fresh run of the app, if I press 1 followed by +, I see this error in the console:
react-dom.js:1716 Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
at calculate (pen.js?key=pen.js-0dbd14cc-78b6-4d7a-1cd4-a3d44f6ff565:51:35)
...
That tells me that it is happening in the function calculate, at line 51.
That is this:
const buttonPushed = e.target.innerText;
That makes sense. It is telling me that e.target is not defined. If I want to investigate, I can add in a log statement:
// ...
const calculate = (e) => {
console.log('e.target', e.target)
const buttonPushed = e.target.innerText;
// ...
When I run it, I get this:
iframeConsoleRunner-7549a40147ccd0ba0a6b5373d87e770e49bb4689f1c2dc30cccc7463f207f997.js:1 e.target <div class="cell" value="1" id="one">1</div> grid
iframeConsoleRunner-7549a40147ccd0ba0a6b5373d87e770e49bb4689f1c2dc30cccc7463f207f997.js:1 e.target <div class="cell" value="+" id="add">+</div> grid
iframeConsoleRunner-7549a40147ccd0ba0a6b5373d87e770e49bb4689f1c2dc30cccc7463f207f997.js:1 e.target undefined
react-dom.js:1716 Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
at calculate (pen.js?key=pen.js-9d346c76-83c6-293f-af67-7aca688ce287:52:35)
at calculate (pen.js?key=pen.js-9d346c76-83c6-293f-af67-7aca688ce287:79:11)
at Object.Rb (react-dom.js:724:7)
at Xb (react-dom.js:736:6)
at Yb (react-dom.js:739:6)
at Ze (react-dom.js:1683:3)
at se (react-dom.js:1710:11)
at react-dom.js:2015:5
at Jb (react-dom.js:6050:12)
at Nb (react-dom.js:671:12)
This tells me that it is calling this function when I press that + button but then is calling it again, for some reason. I would look into that.
That was a massive help.
I don’t remember the rationale, but in the switch block to determine whether an operator key had been pressed, I had it calling the calculate function a second time. Pretty sure my intention was to reset the display to zero, but I had already accomplished that thanks to the trigger I had set on input.
Your solution pushed me four more steps ahead and is greatly appreciated. Thank you again.
The most important thing was to understand the process of debugging. That is the most important skill for a developer. That’s why I wrote out my steps.
Absolutely. And CodePen will let you work with a sort of pseudo console, plus you can access your browser’s console (at the same time!).
My sticking point is that I didn’t know where in the process things were going wrong. Call it a blind spot around the operators. I even knew the app was trying to access an undefined value, and had deliberately coded several for just such a reason.
Anyway, you’re absolutely right and I appreciate seeing your steps. Very helpful.
Sure. I mean, dev tools have things that let you set break points and trace through the code, but if you aren’t at that point yet, just use console.log. There has been code where I literally wrote a console.log after every line of code just to find where it was crashing. Just do what it takes. A good programmer is a good debugger and a good debugger is a good detective.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.