Photo gallery query

The code here doesn’t work. Am I missing something?

Images Gallery2 (codepen.io)

Look at the Console tab in the browser’s developer tools. There is an error message that will tell you why it isn’t working.

Hi. So its telling me 2 things:

  1. something isn’t supported - MIME stylesheet
  2. reading properties of null (‘addEventListener’)

so its not supported by my current computer?

You can forget about that first error. It’s the second one you need to deal with:

Uncaught TypeError: thumbImgsDiv is null

This is telling you that the value of thumbImgsDiv is null and thus you can’t assign an event listener to it. Are you sure that is what you want to assign the event listeners to? From what I can tell, you want to assign a click listener to each of the thumbnail images. Wouldn’t those be stored in thumbImgs?

Okay. Thanks. I have tried this one before and it doesn’t work also. :frowning:

Ya, you can’t just replace thumbImgsDiv with thumbImgs to get it to work. There is something else wrong as well. I was hoping you might be able to figure it out on your own.

Look at your for loop:

for (let i = 0; i < thumbImgs.length; i++) {

What does that tell you about the value in thumbImgs? It’s an array, right? So what do you need to do to access each item in the array? That’s what you want to add the event listener to, right?

And then even after you figure the above out you will still have one more problem. Again, look at the error in the console to help figure it out.

[i] 

has been added.

and yes now there is a problem with this line:

 mainImg.src = e.target.src; 

read something about adding img to the query selector… but thats not working either. I have no idea

You need to double check what you are targeting with the querySelector and querySelectorAll methods. I would recommend after each one you add a console.log to make sure they are working the way you want them to.

got it. Thanks. changed this one to the id reference:
var mainImg = document.querySelector("#main_img"); console.log(mainImg);