Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So let's go ahead and work on this project. Right now I'm on the artist's page of this website. And what I want to do is target this section right here with the art from each artist. I need to make sure that I create a node that targets this area right here. And then add a listener for that node that checks for a click. If one of these images is clicked then we're going to execute some code. So I'm going to switch over to my code and show you that this is a very simple list right here, that has image text inside each list item.
So right now my java script code is completely empty. First I will start off by creating a sell executing function. So just protect any of our local variables from anything else running in our page. So start by creating a variable called myNode and then I'm going to set it to document.querySelector and I'm going to target a section in my page. Now what do I need to target? Let's go back into this page and pull up the console and what I want to do is target this section. So, to find out where that is, I'm going to click on the magnifying glass and click on one of these items.
This shows you the breadcrumbs down here and what I want to pay attention to is the fact that I have an article with an ID of artlist. Inside that I have a div with a class of pixgrid. And inside that I have an on ordered list. That's really what I want to target. So, let me switch back here and target the artlist and then target the pixgrid and the on ordered list within that So once I have that node, I can add an event listener to it.
So I'll save my node, in at event listener, and I want to check for a click event when it happens in that node. So once that click happens I want to execute a function. That function is going to pass along an event. And I want to make sure that I pass this value of false right here. This makes sure that the event is bubbling properly. Bubbling just refers to the fact, that I want to target things within this on order list, and not target things outside it.
So for right now I'm just going to go ahead and log to the console our event. Just so we can see what's happening. So let me go ahead and save that switch over to my code back to the console and I'll refresh the page. And I'll click somewhere inside here notice that no matter where I click its going to log the event of the console. Now, if you look right here you can see where I'm clicking. So if I click somewhere kind of in the middle its going to say that I clicked on the list item if I click. In one of these photos is going to show a click in the image. I want to target only the clicks in the image.
So if I open this right here you can see there's a bunch of properties. The one that I'm interested in is the target property right here, which is there. If I open that up, I can see a lot of different things in here. But, I can choose one that's down here called tag name. So I can check for this property called tag name. And if that property happens to be image, then I can execute my function. So let me go ahead and switch over back to my code and fix this to check to see if the target, so e the event, target of the event happens to have a tagName of IMG.
Then, I want to perform a set of tasks. (SOUND) For right now, I'm just going to output it to the console. So I'll paste that in here, save it, and come back into my page. Refresh, and this time I'll click on this image. You could see that the event fired. But if I click right here, it's not going to fire an event. So it's only firing an event if I click on an image inside this unordered list. So you can see that by creating a node we can be very specific by only targeting things within that node.
So in this case I check for the tag name of IMG. And now we're ready to handle our overlay.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99191 Viewers
56 Video lessons · 112461 Viewers
71 Video lessons · 81270 Viewers
131 Video lessons · 39027 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.