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
– InSync, Commented Jul 28, 2023 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 — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Jul 28, 2023 at 15:01
I want each page to be generated dynamically with a different web address — mufc9000
– mufc9000, Commented Jul 30, 2023 at 10:51

mufc9000 · Accepted Answer · 2023-07-30 19:15:57Z

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.

Collectives™ on Stack Overflow

Create web page using JavaScript with a different web address

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related