navigate to a local html file with params

April 24, 2023

I am having a bit of a conundrum. Im not sure if its down to how ive set my project up, or if i am just being a noob.

So in my index.html, i have the following:

<!DOCTYPE html>
<html lang="en">
<div id="frame">
  <head>
    <title>Country Level Reporting</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div id="root">
      <a style="display:none;" href="detail.html"></a>
      </div>
  </body>
</div>
</html>

and the file i want to navigate to is the following detail.html

<!DOCTYPE html>
<html lang="en">
<div id="frame">
    <head>
        <title>in detail</title>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div>
            Details
        </div>
    </body>
</div>
</html>

Both are these files are in the root of my project. I can navigate to the details.html file when i call window.location.href = "detail.html" with a button onClick call.

Trouble is, i dont know how I can pass in params if i wanted to. I have tried something like this on an onClick handler, but it doesnt work:

window.location.href = `detail?id=${countryCode}.html`;

ideas on how to do this? or any libraries that I need to add to JS project to instigate this properly?

EDIT: the downvotes would be helpful if it was backed up by a comment so i know what I have missed in my explanation

>Solution :

Your direction was right, but there is a small formatting issue in the new href you are setting. You should navigate to detail.html?id=${countryCode}

These are called called Query Parameters, anything after the ? gets converted into a Javascript Object, with key as the part before = and value as part after it. Furthermore, multiple query parameters are seperated by &

These can be accessed in the details.html page as follows:

const queryString = window.location.search; // Contains "?id=<The Given ID>"
const params = new URLSearchParams(queryString); // Converts the query string to javascript object

const id = params.get("id"); // Contains the ID given