Only 1 of 3 of my boxes are clickable anywhere within the box

JavaScript
1

For my Personal Portfolio page, I wanted to make it so that a user could click anywhere within a project’s box to link to that project. The boxes each have a photo of the project and text underneath with the name of it. I don’t know JS yet, but I researched how to do this and tried to implement the JS example that I found. Surprisingly, it worked, but for only ONE of the boxes. If you click anywhere in the box for the Tribute Page, it takes you to the correct codepen. But it did NOT work for the other two items–the link works, but you have to click on the actual text in order for it to link. (If you click elsewhere in the box, nothing happens.) All three of these boxes are the class “.project-tile”, and the three text links are the class “.main-link”, and that is what I used in the JS, like this:
const projectTile = document.querySelector(".project-tile")
const mainLink = document.querySelector(".main-link")

Here is the link to my project:
My FCC Personal Portfolio Page
if anyone would be so kind as to take a look and advise me on this issue.
I’m a total newbie and open to any and all criticism, I just want to get better at this! Thanks!

2

Hi there,
Welcome to the forum.

You don’t need JS to achieve what you want. If you wrap you <a> tag around both the image and the text, the user can click anywhere in the box.

Hope that helps.

3 
const projectTile = document.querySelector(".project-tile");
projectTile.addEventListener("click", handleClick);

The problem you are having is that querySelector() only returns the first element that matches the selector, and thus only the first box is getting the event listener attached to it.

I applaud you for trying to figure this out on your own but since you don’t know JS I’m not sure how to answer this. We generally don’t just do other people’s work for them so I’m not sure I want to paste some code in here to solve your problem. A very brute force way to solve this problem would be to give each of those boxes an id and then use document.getElementById(id) to add an event listener to each box. And since you already have an id on each <a> in the box you could also use getElementById() to trigger the click on the <a>.

4

Hi, thank you very much for your reply! So, the reason I decided not wrap it all in is because when I was trying to figure it out, I found this article (which is also where I got the JS code that I ended up using, from their solution 4):
https://css-tricks.com/block-links-the-search-for-a-perfect-solution/
I thought it was interesting, and I was excited to try some JS, but I don’t understand why it didn’t quite work!

5

Thanks so much for your reply! That does make sense. Now I can see that it is just something I didn’t understand about JS because I haven’t learned enough yet. It’s not really something I need to fix now, so I will re-visit this project later on down the road and see if I can make it work when I know more!
I really appreciate your taking the time to help me out.

6

I think it’s worthwhile to take some time to learn DOM manipulation (how JS interacts with the elements on your page). The JS lessons in basic Javascript don’t cover that, but once you get about half way through basic Javascript, maybe less, you should be able to start that.

8

awesome, thank you for the advice!
JS is pretty intimidating, so much to learn… but I can’t wait to get started with it.