How to change location path when redirecting to another page using window.location?

Question

May be a dumb question, but I couldn't find the answer on google.

I'm making a website on which you can upload photo or video, and I'm using Html, CSS and JavaScript.

On homepage user can click on photo which should take him to /photo/upload, and on video which should take him to /video/upload.

My question is how can I change location path when something is clicked, and redirect user to that page?

And another question, should I make multiple html files in order to do that, or is it possible to just change content of one html file based on url?

Answer 1

You can indeed redirect user by calling the window.location.assign() function. You can add a listener on your image like this:

 const img = document.getElementById("myimg"); img.addEventListener("click", () => { window.location.assign(img.src); });

 <div> <img id="myimg" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" /> </div>

I advise you to build several html pages, it will be easier to understand and maintain your code, but you can also use a front-end framework to ease the task, such as vue.js, react or angular.