Javascript, cannot change product pages dynamically

Question

I am teaching myself Javascript at the moment and I am creating a small website project for fun. My issue is:

I have a homepage that has a button in a navbar called "Products". When I press it, I am redirected in a page where I have a grid layout with 5-6 categories (as images). When I press the images, I am redirected to the relevant products. For example Products > Cars > Fiesta 2009 and more cars.

The thing is that for every different product category I have a different HTML page, but I know that I can just have an HTML page and change its content dynamically(DOM). Is there a good guide that describes this specific functionality? I have tried many different approaches but I don't really know how to do that and my site doesn't work.

Posting it after 15 hours on working on my code and not finding a solution myself*

Answer 1

You can consider using a UI framework/library such as ReactJS, Angular... Then use a routing handler (react-router, @angular/router...).

Another alternative is to use plain javascript (VanillaJS). I submitted a sample few days ago nearly around this topic.