Onclick event working intermittently

#1

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.

#2

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

#3

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) {
        console.log("solve")

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.

#4

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.

1 Like
#5 
console.log('test is: ' + test)
var x = test.toString();
#6

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.

#7

Your browser is not enough Chrome)

#8

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.

#9

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.

#10

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.

#11 
console.log(test)              
console.log(typeof equation[0])
console.log(equation[0].hasOwnProperty('length'))
test = equation[0].length;
console.log(test)

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.

#12

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

Thanks a lot for your help.