Create web page using JavaScript with a different web address

Question

I have created a custom element using JavaScript. This custom element has been added to my HTML page. When the user clicks on this element, the user should be directed to a new page. This page should be created dynamically using JavaScript.

I understand how to create this page by clearing the current page and adding the new elements. However, I want to change the web address and redirect the user to a brand new page.

I have created an Array of Objects. I want to write a single block of code and from this block, create a separate page for each object in the Array of Objects.

For example:

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 this example, I have written some JavaScript code. For each object in myArray, a link is created which shows the value of object currently being iterated through. However, the link is always page2.html, which I have created manually.

Instead of creating each link manually, I want the JavaScript program to create each page. I understand I can do this by clearing the current page using CSS and adding the new elements. However, this will mean the page will not change and only the content of the page.

I want the JavaScript program to create a page dynamically for each object in myArray with a different path.

I have found this question which is similar but regarding how to do this with a page using PHP: dynamically create HTML page from Javascript

Could you please add some examples so that we understand what you mean? — InSync, Jul 28 '23 at 14:53
"pages" with unique URLs are created by Web Servers (server-side) delivering the document containing HTML/CSS/JS to the Web Browser (client-side) You can't _**create**_ a new URL/Page in the Browser. You can request a new page (from the server) with JavaScript" ``document.location = "https://your new URL"`` OR create a SPA: [How to create a Single Page Application](https://medium.com/swlh/how-to-create-spa-with-less-than-20-lines-of-javascript-code-814d1556dd9a) — Danny '365CSI' Engelman, Jul 28 '23 at 15:01
I want each page to be generated dynamically with a different web address — mufc9000, Jul 30 '23 at 10:51
Do you want a single-page-application. You can change the URL with [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). — jabaa, Jul 30 '23 at 11:08

mufc9000 · Accepted Answer · 2023-07-30T19:15:57.583

Use the history.pushState function. For example:

history.pushState({page: "page1"}, "Page 1", "/page1");

This will dynamically create a page with the web address "/page1". You can use a function such as innerHTML to create the HTML code and make each page dynamic by creating an Array of Objects which contains the data that should be different in each page.

You can then create a link to each object using the base URL. For example:

let cars = [
  {
    "color": "purple",
    "type": "minivan",
  },
  {
    "color": "red",
    "type": "station wagon",
  },
];

let baseURL = "www.mywebsite.com/";

for (let car of cars) {
  let color = car.color;
  let button = document.createElement("input");
  button.setAttribute("type", "submit");
  button.setAttribute("id", color);
  button.setAttribute("value", color);
  button.setAttribute("onclick", function() {
    window.location.href = baseURL + color;
  });
  document.body.appendChild(button);
}

This will not change the address when opening the webpage on a local machine. However, when the webpage is on a web server, it will change the web address.

Create web page using JavaScript with a different web address

1 Answers1