Select elements with getElementById

- [Instructor] In this video we're going to be using JavaScript to interact with the DOM. We'll be using the native function getElementById and then using that function we can target any tag in the body of your file and then we can do some stuff to it. Things like provide some effect, move things around and so forth. So the idea of this video is we're going to mouseover one of these sponsor's title, we'll choose Frankie for this one and when I do that it's going to provide an effect to this image, it's going to put a box around the image, and also it's going to grab Frankie's name and I'm going to output that name to the console over here so it's going to say the effect is on, the effect is off, so we know it's working. Then when you mouse away from the sponsor's title then it should turn off the effect. Okay, so let's go into Brackets and see if we can start writing this code. So here in Brackets I'm going to open this about file if you haven't already, it's the about file inside the chapter two video zero, two, zero, one. I'll be using this one here, also I'll be creating a new JavaScript file, so let's do that first. Do a right-click on your JavaScript JS folder and do a new file and we'll just call this about.js file. That brings up to the screen ready for us to type your code. Now, I already created this class called selected inside the CSS rules, so you can see that if you go to the styles sheet here, you see at the very bottom I have a styling rule called selected and that's going to provide the special effect that's going to give a border, red solid border and a drop shadow as well. Okay, so we add this when we mouseover that sponsor's title. Let's go back to the about.js. So I'm going to provide two functions, one is for effect on, one's for off, and maybe another one just to output the data to the console. So we'll do that first is to provide the function for the effect on, we'll just call it on for now. Now when we provide this mouseover, mouse away from the sponsor's title, we're going to pass Frankie's id to this function so we know which one to grab, when we've got that image. So we're going to pass an id to this function and then in here I'm going to need to create a variable name to point to that image, call it member. I'm going to grab the getElementById, I'm grabbing using its id given by the function. So I also want to grab its name. So as you remember if you go back to the about page, if I scroll down to the bottom of this file, here's Frankie. So when a mouse overs the word Sponsor here, it's going to pass the id Frankie, okay? And not only that I'm going to grab its name, so it's contained within this paragraph tag, which is the second child of this div tag, but also the next sibling of this image. So we'll be probably using the next sibling to grab its inner html. So that's the idea. Okay, switch back to the about.js and we're going to provide the memberName. Again, the purpose of this memberName is just to display to the console so we know that it's pulling the correct data. So it's going to be the member, next, Sibling and I want to grab the inner html. So that's going to grab Frankie's name or whoever's name and put it into the memberName. And then now when we do this we want to add the style rule. Now you don't want to create a attribute of style and then overwrite what's already there, we just want to append it to what is already there. In this case it does have a class already. So we'll say classList, we'll add it to the list. We'll add the selected style rule to the list. And that should highlight the image. So for the console, we want to first maybe clear it, just make sure nothing is written there. If you don't, then the list is going to keep growing, growing, and then now I'm going to provide a function called showName and we're going to pass the memberName and it's status, maybe just say ON for this one. The effect is on. And I think that's it for this function. So let's create the second function which is the show me function, showName, sorry. I'm passing the member names, let's call it name here and the status, and so this will just take one line. We're going to just output through the console. And you might ask me why we just want to do that. Well, because maybe this function can be used again, right? So the idea of using a function is to modularize your code. So we're going to pass the message effect is on or off for this member, well I'm going to call it status. So it'll be effect on or off for and then we have the name. And that's it for this function. I'm going to tab down here just a few more lines. Now we want to provide the other function which is the off function, right, effectOff. And I'll do the same thing, pass the same id to this function, var member as well, is the same member, id, and then also want to grab the name of this member, which is the same name, member.next, Sibling, and innerHTML. And then we want to now remove that class list style rule. Not add, remove the selected styling rule from there and then finally just show the information to the console, memberName, and then the status will be OFF this time. Okay, so I think that's it for this function. Let me just do a little clean up here. So save this file, Control + S to save it. One more thing we need to do, actually two more things, go back to the about page. So we need to provide the function here. When we mouse over this Sponsor title, it's going to call the function. So we'll be using the mouseover event, mouseover is equal to the effectOn, I'm going to pass Frankie's id, frankiesmith, and we'll do one more for the mouseout, and this is going to be the effectOff, and we also want to pass Frankie's id. So that's good and then finally we need just to add the script these files. So go all the way to the top of your file and right below the link here we're going to say script src, include the script called about and that should do it. So Control + S to save and then go back to the browser and refresh this page. Okay, so let's see if it works. So there it is, you see on the console over here it has it on and off for Frankie. So the Frankie is coming from that p tag. This is just one of the few examples you can use this getElementById to do so many things to your webpage and again we're just scraping the surface here. You can use this for example maybe instead of just hovering and doing this special effect, you could provide other data to this person. His job, what he does and so forth, all other data as well. So this is a very, very easy and very quick way to select any element in the DOM if you know its id.