Problem with redirecting using window.location.href and getting JS to work

Hello! I’m trying to ask for help regarding my project that works locally but once I built it using Netlify, it wouldn’t work. any help with be appreciated!

here is the source code - movie-watchlist/index.js at main · TerrenceArceo/movie-watchlist · GitHub
here is the built project - https://sparkling-cuchufli-6959ef.netlify.app/

THE PROBLEM

  • I am trying to redirect from my index.html to another page called watchlist.html, but since on my index.js I am using document.addEventListener, it made everything listens to a “click”. so my html anchor tags wouldn’t work anymore, so I had to give my anchor tag a data-attribute and made JS to listen for an element being clicked with the similar attribute that once clicked it will redirect to watchlist.html using window.location.href. The problem is I have already provided the exact link to it but still giving me the “redirecting to a broken link” problem…

  • Also any help in figuring out why my javascript won’t work?

Thank you in advance!

@Terrencewafu Basically everything you’ve written about your JavaScript is irrelevant.

The /watchlist.html page doesn’t exist, this can be seen clearly by navigating there directly:

https://sparkling-cuchufli-6959ef.netlify.app/watchlist.html

You need to ensure the page actually exists.

(Note: Your source code can’t be viewed because it’s currently private)

Thank you so much for trying to help Nathan!

I have made my source code public -

here is what my files look like, just in case you can’t open the files still. by opening the project, it seems like it can’t detect the images from the images folder either.

thank you Nathan!

@Terrencewafu As I previously indicated, there is no watchlist.html file.

Run your build locally and you will see that it never produces one:

You should revisit the Vite documentation.

Also be careful with case sensitivity, as you can see in your screenshot you have watchList

Hi Nathan! it’s me again!

I went and did what you told me to do and revisited VITE documentation. I was able to make my images appear by importing them, and was able to make my Javascript work.

what I really can’t figure out is the redirecting to watchlist.html
I build it locally using Vite and you’re right! it is not building watchlist.html and watchlist.js
I also fixed the camel case problem “watchList.html” to “watchlist.html”

  • what exactly is the reason why this is happening and how can I fix it?

Thank you again Nathan! you’ve been very patient and helpful!

@Terrencewafu This seems like a question for Vite’s community, not for Netlify’s, see:

https://vite.dev/guide/#community

I don’t work with Vite myself so can’t give you a “users perspective”, but to throw you a bone:

Hi Nathan!

I just want to thank you so much for all your help! I have finally figured out the solution to my problem! thank to you!

Just in case some other people in the future will have the same problem as this one, I would like to leave this solution here for them to see.

I basically had to configure my vite.config.js like this:

and moved my watchlist.html and watchlist.js inside a watchlist folder!

thank you so much! on top of all this coding I have done, I was also able to learn this new awesome thing called VITE!

1 Like