So here is a string, Chuck, it's wrapped in a span tag and the span has an id of person, okay? And so here in my JavaScript I say document, everything starts with document, getElementById and then I give the id that I'm looking for. And then that basically looks through the whole page. Looks through the whole page and it finds the thing that has the id of person and then, let me clear this. Then this little expression right here is this tag. So you basically have gotten yourself a handle, st is the variable, this st variable. That st variable is a handle to that little part, okay? And then you can do things and we can do stuff to the outer part of the tag and everything. But if we just want this HTML we have to say gimme the innerHTML. So I say .innerHTML and that dives into the tag and pulls out the actual HTML text. That's the child of that tag. And I can print that out, and I can also change it, right? I can also change it. So I can put it on document.getElementById('person').innerHTML = 'Joseph'. Well, that is an assignment statement that's going to overwrite this part of the Document Object Model and change it. And I have a couple log statements. So let's play with this particular one right here. This is js-13. Okay, so if we recall, it goes in, it finds the id tag of person. Then it prints out how much, lets switch to console, I can't wait, wait, wait, let me switch to console here. [LAUGH] I mean, once the alert's up I can't switch right, because the alert has taken over the whole browser. So I am going to switch to console so I can watch it in console. And then I'm going to clear the console and then I'm going to press refresh so that I can sort of watch it all happen in the console. Okay, [COUGH] so it looked up the span with id = person, pulled out the innerHTML. It both logged it in console.log and it did it in an alert box, okay? [COUGH] Now this browser's frozen. This browser's frozen because, The alert box is up. And it's not going to do anything until we press OK. So I'll press OK, which means the JavaScript is going to start back up again. If you recall what it does, it first puts out a log that shows what kind of a thing that object is, that st object. And then it changed it to Joseph, and you'll notice that it changed it to Joseph. Literally, my JavaScript code changed the Document Object Model, and the browser is always rendering whatever is in the Document Object Model. So my JavaScript changed the Document Object Model, the browser's just poof, rendered it. So I'll do this in faster motion. So the original HTML had Chuck, we looked that thing up, as soon as I hit this OK, it's going to change it to Joseph, and it just changes to Joseph, okay? So if I didn't have the alert, it would happen instantaneously. It would happen so fast you wouldn't see it. And I can use console.log to kind of keep track of stuff, right? And so you can sort of work through this thing and see all the stuff that's happening. I make it go in slow motion by putting this alert in. I could also use the debugger and a breakpoint, if I wanted to, to see that, but I just want to stop it. So this is looking it up, pulling stuff out, and logging it. And then it alerts to stop it, mostly. And then it changes it and continues on. Yeah, so here's another one that basically is sort of combining an onclick. And so what's going on here is I have two links, well, it's probably easier just for me to show you how this works. This is js-14, So js-14. Okay, so if I look the word Stuff is in here. So I have a span id="stuff" and I have an onclick the word BACK and FORTH, right? So I do a document.getElementId('stuff').innerHTML = the string BACK. If I click on that, then I return false. Remember you gotta return false. And then if you click on FORTH it's going to change that text to be FORTH. So what I'm doing is overwriting this stuff, right? I'm grabbing it I'm going to change it to BACK, then I'm going to change it to FORTH. I'm going to change it to BACK and then I'm going to change it to FORTH. And this all done on these clicks. But it starts out coming from the server with Stuff there, right? because that's whats in there in the first place. Them I click on this href, this href, and it changes the DOM to be BACK. And I click on this href and it changes to be FORTH, okay? This won't be very exciting. I click on BACK, it looks it up in onclick, it looks it up and then changes it to the word BACK. Sorry. There we go. I click on BACK, I click on FORTH. I actually don't have any JavaScript to reset it back to Stuff. Unless, of course, I hit refresh and then it pulls another copy from the server and it's its original form. These are just going BACK and FORTH and changing, okay? Fascinating, hit the back and forth, fascinating. Okay, and so that's basically causing things to happen as response to clicks. The previous example we just sort of had straight line code that just ran. [MUSIC]
