Onclick event working intermittently

Onclick event working intermittently


codepen project (calculator):

Everything works fine normally, but the onclick event for the numbers (0-9) will not activate my ‘calculate’ function after the equals (=) sign onclick event has been activated. Numbers work as expected otherwise - including after the use of an operator or the ‘clear’ button following ‘=’.

The first value shown on the calculator is just the test variable I’m using to debug (this is temporary) - the second line shows the calculator inputs and operators.

I’ve done some testing and it does not appear the onclick event is even calling the function after ‘=’ is used. I can’t see anything online for why this would be the case, so any insight would be appreciated.


You can put your js code in js tab by the way.


It doesn’t seem like “Everything works fine normally”, to be honest. The display starts updating at random (if I press 7, it says -1) and no calculations seem to work.

Do you mean that you don’t think ‘solve’ is getting set to true? It appears it is, because if I add a console log after the test

      if (solve == true) {

I see ‘solve’ in the console whenever I click ‘equals’.

My advice would be to add lots of console logs to print out what it’s doing at each step (eg; console.log(“I am in case = 1”) or whatever) and then compare what it prints to what you think should be happening.


It seems that your test variable become undefined once you hit ‘=’.

index.html?editors=1000:144 Uncaught TypeError: Cannot read property 'toString' of undefined
    at calculate (index.html?editors=1000:144)
    at HTMLButtonElement.onclick (index.html?editors=1000:171)
calculate @ index.html?editors=1000:144
onclick @ index.html?editors=1000:171

google your browser’s development console hotkeys, open it and see it for yourself in console.

console.log('test is: ' + test)
var x = test.toString();


This is why I don’t like codepen - it doesn’t give you the errors properly :confounded:

It doesn’t even seem to allow the error through to the regular console. In FirefoxDE, I get “An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing” which also makes it a potential security concern, I think.


Your browser is not enough Chrome)


shhh… I just took Chrome out of my dock and I’m trying to get along without it for a week to see what hurts. I’m a bit sad that the developer support in FF isn’t as good. I want to love Mozilla.


The first value shown on the calculator is just the test variable I’m using to debug (this is temporary) - the second line shows the calculator working as intended. Sorry if this was not clear before.

The console output is giving me -5 for test after hitting ‘=’, which is as expected. It does become undefined upon hitting a number, which is unsurprising and the reason for my post. Note test is defined normally when hitting a number in any other situation.


Yes, I notice you edited the original comment so that now I sound like the one who’s confused :slight_smile:

Just pepper it with console.logs and I’m sure you’ll track down the problem. It sounds like you’re pretty smart.

console.log(typeof equation[0])
test = equation[0].length;

equation[0] before first computation is String and Number after it. Number doesn’t have .length property which resolves into undefined. And then you trying to call .toString() on undefined - interpreter throws exception.


That was exactly it, playing fast and loose with variable types.

Thanks a lot for your help.