How to create random page when user clicks on button?

Hello

So I am trying to write a chat page (because i'm bored) and was wondering something.

See, my chat room has two functions. You can either chat with everybody, or create your own chat room.

The chat with everybody is fine, but my problem is how to create a random page.

My Js looks like this:

function makeid(length) {
  var result = "";
  var characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

function chatroom() {
  var opened = window.open(makeid(5) + "/index.html");
  opened.document.write(
    '<title>Chat Room</title>    <link rel="stylesheet" href="/style.css" />    <script src="/script.js" defer></script>    <link      rel="stylesheet"      "type="text/css"      href="https://www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0"    />    <script type="text/javascript" id="hcb">      if (!window.hcb_user) {        hcb_user = {};      }      (function() {        var s = document.createElement("script"),          l = hcb_user.PAGE || ("" + window.location).replace(/\'/g, "%27"),          h = "https://www.htmlcommentbox.com";        s.setAttribute("type", "text/javascript");        s.setAttribute(          "src",          h +            "/jread?page=" +            encodeURIComponent(l).replace("+", "%2B") +            "&opts=16862&num=10&ts=1604950047682"        );        if (typeof s != "undefined")          document.getElementsByTagName("head")[0].appendChild(s);      })(); //-->    </script>    <!-- end www.htmlcommentbox.com -->  </head>  <body>    <h1>      CHATZ    </h1>    <!-- begin wwww.htmlcommentbox.com -->    <div id="HCB_comment_box">      <a href="http://www.htmlcommentbox.com">Comment Box</a> is loading      comments...    </div>  </body></html>'
  );

When i run the function chatroom, what happens is it opens about:blank, not the random url (like https://inter.blag/2sd39) where the 2sd39 is a js generated random string.

Is there anyway to make it open a random id?

Oh, and please note, I am looking for a pure js solution

Problem 2

When I run that code a second time, it doesnt create a new chat room. The about:blank page still has the old comments from the first time.

What do you recommend I do to get it to do that?

Please note:

I am a complete newbie when it comes to js

Solution

The problem is because you're trying to write to that spawned window's document. Try without opened.document.write and it will work. It's a security measure. Imagine a situation when you can open a banking page (for someone else) just like that and mess with its content by overriding content on the fly.

I assume that you do not want or do not know how to create sophisticated web app that can handle URLs and dynamically map (route) them to existing assets or generate content dynamically. What you can do is prepare another document, eg. chat.html and pass id to it via query, eg:

https://inter.blag/chat.html?chatID=2sd39

And then play with window.location in JS code embedded in chat.html to read ID.

I am not sure what exactly are you trying to achieve and I also doubt if window.open is the best way to redirect users to other pages.