test.html, Line 35: The ID for the element is misspelled as "#numbertoo". Should be "#numbertwo".

Diagnosed in Chrome via Uncaught TypeError: Cannot read property 'value' of null.

That was fun!

I'm going to be picky. "Diagnosed in Chrome" - where in Chrome. :)

While in FF, open Firebug, get "TypeError: document.querySelector(...) is null, line 35".

Check the source and find the misspelled id.

I used the IE debugger (F12), since that is what I am most familiar. The script console is pretty intuitive and easy to use.

SCRIPT5007: Unable to get property 'value' of undefined or null reference
test.html, line 35 character 6

var two = document.querySelector("#numbertoo").value;

element ID is actually "numbertwo".

Kyle - just curious - what version of IE?

In the debugger tool of FireFox, i got this error:

[20:00:19.506] TypeError: document.querySelector(...) is null @ http://www.raymondcamden.co...

which leads to

var two = document.querySelector("#numbertoo").value;

It should be #numbertwo instead of #numbertoo

Open error console in the Web Developer 1.2.5 for Firefox, click on the error, see highlighted line, look up to the form ID, see misspelling. Done.

It's fun to see the different tools people use. I'd be curious how people might tackle a harder error.

Right now I am using IE10. Our web application where I work uses some VBScript that we can't get rid of, so I have become intimately familiar with the F12 tool :)

I used the Chrome javascript console to see the error and line number. I clicked on the file:line# to see the location in the source. Then I was able to see the typo.

@Kyle: VBScript still works in IE10?

Unfortunately not. We have to run the newer IE versions in incompatibility mode. It works surprisingly well, though.

Are you kidding? The JavaScript code of the page is totally crap. I don't care about a typo, say, numbertoo id; what I actually care is the code itself.

1. You've just imported jQuery 1.9.1, from http://ajax.googleapis.com/... that's very strange and confusing to me. I believe the original address should be https://ajax.googleapis.com....

2. If you are going to use jQuery, why are you using event listeners or invoking querySelector directly? Aren't you supposed to use "ready handler" and the "jQuery selectors", as well as the "submit" utility function and the "html" set function instead of those shaky code?

3. You need to pass the second argument to parseInt, or else, on some browser & based on entered data, users could get wrong results. (I'm addressing radix parameter which is by default 8 on based on a given string).

Keep up the good work,
Mehdi

Thanks for the feedback Mehdi. I had loaded jQuery initially when I built my first 'broken app', but I changed directions and decided to do something else. Therefore the jQuery load should be removed. Doing so now.

"You've just imported jQuery 1.9.1, from http://ajax.googleapis.com/...... that's very strange and confusing to me"

This is a supported way of loading by major version number. It means, "Give me the latest in the 1.X branch.

"If you are going to use jQuery, why are you using event listeners or invoking querySelector directly?" A mistake. You've made your point twice already about this so not sure why you're harping to it.

"You need to pass the second argument to parseInt, or else, on some browser & based on entered data, users could get wrong results."

Good point. Added ,10 to both.

ctrl-shift-I: show console tab... play with the page. Click add; observe error "Uncaught TypeError: Cannot read property 'value' of null test.html:35 (anonymous function)" inspect the ID in question in the html source of the page and notice that the ID is spelled incorrectly "too" instead of "two" in the JS. If this were a local file, you would be able to edit in place and save the file to retest your solution. Chrome offers a "local changes" option that would show what it took to repair your solution.

@Raymond Camden: Thank you. I didn't know about the 1.x branch... But I'm curious to now if it's used in real-world applications since this could easily break existing/tested code as soon as a new version is released. Right?

I'd say it's rare for jQuery to add backwards-compat issues. I don't think it is something folks would have to worry about *all* the time, but sure, if it concerns you, just include a specific version. Normally I'd use 2.X as well, but my snippet hasn't been updated.

So.... hopefully you've gotten past the 'totally crap' aspect. ;)

> So.... hopefully you've gotten past the 'totally crap' aspect. ;)

Yeah sure. :) It now looks rational.

In both Firefox and Chrome I right-click to 'inspect element' see the error in the 'Console' tab/region, then click on the line number on the right-hand side and the line number of the issue is selected.

If you use the developer tools (F12 key) in Chrome, you will get this error

"Uncaught TypeError: Cannot read property 'value' of null"

Cause of error:-
var two = document.querySelector("#numbertoo").value;

@Ray: In Chrome, Ctrl-Shift-I brings up the developer tools, which is very similar to Firebug, in some ways better, in some ways not.

Thanks for the example. I'm a bit new and appreciate the kick start to learning. I've identified the numbertoo as well, but was trying to change it in Chome Developer Tools/Sources dynamically to see if I could get the page to work. I put in a breakpoint and then renamed the var:
var two = document.querySelector("#numbertwo").value;
When I resume the code, it now errors with:
Uncaught TypeError: Cannot read property 'value' of null

Is this type of editing possible?

@Matt: As far as I know, Chrome supports this, but only when the JS you run is in it's own file.

I found this too