Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The final function will actually change the HTML of the headline. So the functions that are defined when the page loads, these won't be executed, but it will know about them. The two lines of code that I will run is this one where I am grabbing that headline element and then I am adding an event handler to it. I am saying when somebody clicks the headline, call firstFunction. firstFunction should call secondFunction, secondFunction should call thirdFunction, thirdFunction should call fourthFunction, and fourthFunction should change the value of that.
I could leave that in or I could take it out. Well, I still don't know perhaps if this event handler is working. Maybe I've done something wrong here. I am going to add another alert. I could have done it before the call to firstFunction or I could add it after. Save that again, go over, and what I can do here is just refresh the page. Bear in mind, I've reloaded, I am not getting an alert message, but that's okay, because this is my event handler. It shouldn't happen until I click the headline, so let's see what happens. I click it. Nope.
I am not getting anything going on here. But that itself doesn't necessarily prove that the problem is here, because think about what happens. I am trying to call firstFunction, which itself calls secondFunction, then thirdFunction, then fourthFunction, then this one and after each function is called it will return control to the previous one to go back up the stack, back here. What I really want to do here is start to put in another alert message and this is very common, that tells me in this case, just about to call first function.
Now, I am going to save this, refresh this page. Now I click the headline. Okay, so I know I am getting in the event handler. I am just about to call first function. I did then go into this line. Something happens between this alert and this alert, so something is certainly happening in the chain of calls here. Now, this as I mentioned is a very low-tech way of doing it. It's what referred to as tracing. We're actually injecting messages, we are outputting some information saying yes, we got to this point, we got to this point, we got to another point, and it's quite common that what ends up happening is there's a lot of trace messages.
So I click the headline. I'm just about to call first function, looks good, just about to call second function, okay, just about to call third function. We're looking good, we're looking like we're going all the way through, just about to call fourth function. Great! Okay, so what happened was I got this trace, I got this trace, I got this trace, but I didn't get this one. So something happened after this alert message. Say we call fourth function.
And I should have just jumped in here, but as I am looking a bit closer to it I suddenly realize, oh, I have got a typo. The name of the function is fourthFunction with an uppercase F of Function. This one isn't. Here's where the problem is. We never got into the fourth function. So now I am going to save this, jump back over, refresh the page, click the headline, follow the traces, first, second, third, fourth, just about to change the headline, and then we change the headline and then it finally comes back and said yes, now the control had been returned all the way back to our event handler.
Now our code is working and the really tedious thing is I have to go back and take out all these messages, what are typically referred to as trace messages. Yes, we're using an alert to do it but the concept is what's known as a trace. I could also comment them out if I thought that I wanted to leave them there for future use. Following the flow of your program by doing this, by doing trace messages often referred to as logging to the console as well, is a very, very common way of doing this.
And while it can be a little tedious, you often find that you'll actually discover the bugs as you're putting in your trace messages. It is a low-tech technique, but one of the benefits of it is it doesn't require any special tools. It doesn't require special debugger programs or you to do anything other than add a few lines of code into your program. But it wouldn't be something that I'd necessarily want to do in 10,000 lines of code. So for that, we have great programs called debuggers that can help us go through our code line by line as it's running and we'll see those in a moment.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105206 Viewers
56 Video lessons · 116982 Viewers
71 Video lessons · 86183 Viewers
131 Video lessons · 41208 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.