Ok, pardon the link-bait title. If you are a regular reader of this blog you know that on some Fridays I do a simple puzzler. This is a coding challenge that - typically - only requires about 5 minutes to solve. Today I've decided to do something a bit different. Maybe it will work - maybe it won't.
As you know - I am a huge advocate of making use of the debugging tools that modern browsers provide. I can't tell you how often I get emails from people who say their code isn't working and have absolutely no idea why.

The goal of this challenge (and the others that may or may not follow) is to simply debug a broken web application. I'm going to provide a link to a web page. In this case, a simple form that asks for two numbers and does math on them with JavaScript. As I said, the application is broken, but how it is broken is the task you need to solve. To be clear, if you already know how to use your browser dev tools then this challenge is probably not for you. But I bet you work with a few people who don't know squat about their browser. Or maybe you're like me and primarily a Chrome user. This would be a great opportunity to try the tools in another browser. Heck, maybe you'll learn something in the process.
When you figure it out, describe the process you took in the comments below. Most likely people will reach the solution via the same method and that's perfectly fine.
Today's challenge is rather easy I think - but if folks dig this I promise to ramp it up next time: http://www.raymondcamden.com/demos/2013/aug/16/test.html
Archived Comments
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