My latest project involves creating custom elements using JavaScript and adding them to my HTML page. When the user interacts with these elements, I want them to be redirected to a new page that is dynamically generated through JavaScript.
I have a clear vision of how to update the current page with new content by clearing it and adding fresh elements. However, I'm facing a challenge in changing the web address to redirect users to entirely new pages.
To tackle this issue, I came up with an idea of utilizing an Array of Objects. My goal is to streamline the process by writing a single block of code that generates separate pages for each object within the array.
For instance:
const myArray = [{object: "First Object",},{ "Second Object"},{ "Third Object"},{ "Fourth Object"},{ "Fifth Object"}];
const customElements = window.customElements;
class MyElement extends HTMLElement {
constructor() {
super();
this.innerHTML = `<a href="page2.html">${myArray.object}</a>`;
}}
customElements.define("header-element", MyElement);
In the provided example, the JavaScript code creates links corresponding to each object in myArray, displaying their names. However, the link always directs to page2.html, which needs manual creation.
Instead of manually creating each link, I desire the JavaScript program to dynamically generate individual pages for every object without hardcoding paths. Clearing the existing page via CSS and inserting new elements won't suffice, as it only updates the content instead of changing the entire page structure.
The ultimate aim is to programmatically generate unique pages for each object in myArray with distinct URLs.
I stumbled upon a similar question related to dynamic HTML page creation using PHP: dynamically create HTML page from Javascript