SPEAKER 1: Now in that last example, recall that we interspersed some JavaScript code inside of my HTML, specifically, inside of the value of the attribute called On Submit for that form tag. Now for small pages, this isn't such a big deal. But as a web page gets longer and more complex, simply putting your JavaScript code here and there inside of the value of attributes isn't the best design. Best if we factor that out and at least put it inside of the script tag centrally. 

How to do this? Well let's return to my form tag and first delete this attribute and its value altogether. Then up here, rather than define a function called Greet, let's hang on to the line of code that ultimately we will still want to execute and replace the Greet function as follows. Document.get Element By ID quote unquote demo-- where demo, recall, is the unique identifier for the form itself-- dot on submit, which recall is the name of the event handler in which we're interested. And let's assign that on submit handler the value that's actually a function itself. 

Now notice that I'm not actually calling a function here. I'm instead defining an anonymous, otherwise known as a lambda function, by specifying between these curly braces a bunch of code that should actually be executed. Specifically, the code that I'd like to execute is that line that I had before, and then let's add to that return false so that this form is not ultimately submitted to end remote web server in the traditional way. 

Let's now save this file, open it up in a browser, and see what happens. http://localhost/dom-1.html. Let's now type in my name, David, Submit. And nothing appears to have happened except the URL of my page seems to have changed as though the form was actually submitted to the same file. 

Now why might that be? Well I need some more information. So let's go ahead and open up Chrome's Developer Tools so that I can actually look at the console window to see if I've done something wrong. I can access that via a couple of ways. One of which is via this menu here, then under Tools, then down to Developer Tools. 

And notice here in the Console tab, there's an uncaught type error, cannot set property on submit of null. Now why might that be? Well back in my source code here, notice that on submit I think is a property of the element whose unique identifier is demo. An element, again, is just a node in a tree. 

So it appears that my browser doesn't think that that element or node exists yet. And indeed, it doesn't. Recall that a web page is parsed or read by a web browser, top to bottom, left to right. And so when JavaScript code is encountered, typically, it's executed right away. 

But in this case, we haven't even gotten yet to the part of the dom, the HTML, in which that form with a unique identifier demo has been declared. And so we're trying to execute my JavaScript code before that node even exists in the tree which, of course, is problematic because then, surely, the element itself will be null at that point in time. 

So how to fix? Well we have a couple of solutions. But let's try the simplest by relocating my script tag from the head tag to my body, but specifically, toward the bottom of my page's body so that it's below the nodes and questions. Specifically, let's highlight and cut the open tag and close tag for script and relocate that whole block of code to the bottom of the file here. 

Now this isn't necessarily the cleanest design, but at least it will enforce the right order of operations. Let's save the file and reload in my browser. Let's reload the page, re-input my name, and there, Hello David is back.