Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So right now this script is executing whenever it gets to it in the index.html file, which is at the very end. So this page loads and then the script runs right here, so all this is executing right then. So what we'll do is prevent that from happening, by putting everything inside a function. So we'll grab all those code and we'll paste it right there. Let me go ahead and indent that a little bit. And now if I save this and I take a look at my page, you'll notice that nothing is happening because that function is not being called.
So we can do an onmouseover, and I'll save that, refresh our page. Now when I go over this button, it loads the text. So mouse over that button and there's the text. So something interesting about events is that not all elements on a page can trigger the same types of events. So for example, there's an element called onload, so you might be tempted to say something like this: whenever this button finishes loading, then execute the function. So let me save that and see what happens. When I refresh the page, this is not loading, and it really doesn't matter what we do here.
That's because the onload event doesn't make sense for buttons; it really only makes sense for a page or a body tag. So it's an attribute that can only go in the body tag. So let me save that and come over here. I'll refresh the page, and now you can see that it's kind of doing what it did before. As soon as the page loads, or as soon as the body of the page has finished loading--and it's going to load the text from our file. That's just one thing to keep in mind, not all elements can trigger any type of event. There's actually a ton of events.
So that puts the button in the mybutton variable, and then what I can do is check for a click. So I can say mybutton.onclick= and then I can execute the function called loadAJAX. So I'll save that. And notice the different notation here. I don't need the parentheses in here. So I'll save that, come over here, refresh, Load button, and now when I click on the button, it loads my text. So there's a different way to write this, and it doesn't really matter which way you do it, but you'll see it in both ways on the web.
So one of the things that you can do to shorten this a little bit is actually create the function as a function literal. So I can get rid of all this right here and just say =function and then it will just execute the function as soon as that mouse is clicked. That's okay if this is the only button that's going to load the list of names for us. If you wanted to use a function that was more generic, you might want to keep it the other way. So let me save this and over here refresh, and we click and there's our text. So events are pretty easy to work with.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97508 Viewers
61 Video lessons · 84747 Viewers
71 Video lessons · 68923 Viewers
56 Video lessons · 101377 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.
Your file was successfully uploaded.