1

Is it possible to fill <h1 id="fillname"></h1> with "John" or anything if I add ?fillname=John or ?fillname=anythingausertype in my URL?

Eg.: https://www.example.com/?fillname=John fills <h1 id="fillname">John</h1>

Kim Santos
  • 93
  • 6
  • 2
    yes.. to do this you can use this https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript – jcal Dec 04 '19 at 17:30
  • 2
    Could [this](https://stackoverflow.com/questions/15653554/get-the-query-string-value-and-display-it-in-my-html-page) page also be helpful? – Run_Script Dec 04 '19 at 17:31
  • 1
    Does this answer your question? [How can I get query string values in JavaScript?](https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) – Luuuud Dec 04 '19 at 17:31

5 Answers5

1

You should use window.location.search and the URLSearchParams helper object to look at URL parameters in JavaScript:

<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>No parameters provided</h1>

    <script>
        var h1 = document.querySelector('h1');
        var urlParams = new URLSearchParams(window.location.search);
        if(urlParams.has('fillname')) {
          h1.innerText = urlParams.get("fillname");
        }
      </script>
  </body>
</html>

Try this in a browser and add '?fillname=test' to the end of the filename in the address bar.

gabriel.hayes
  • 2,267
  • 12
  • 15
1

Without any external library

const query = window.location.search.replace("?", "");
const parts = query.split("&");
const fillNameQS = parts[parts.findIndex(qs => qs.includes("fillname"))];
const value = fillNameQS.split("=")[1];
document.getElementById("#fillname").innerText = value;
Luk Deathrage Prochzka
  • 328
  • 1
  • 12
  • Why not use [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams#Browser_compatibility)? It is a native API – gabriel.hayes Dec 04 '19 at 17:33
  • I am acutally used to query-string library so I totally forgot that there is a native feature that parses query as well. Btw it' does not work in IE11 (however methods `includes` and `findIndex` that I used do not work as well) – Luk Deathrage Prochzka Dec 04 '19 at 17:34
1

You can, but i do not think this is a good idea. I think there are better ways to accomplish what you want.

Do do this, first get the parameter:

var url = new URL(window.location.href);
var fillname = url.searchParams.get("fillname");

then add it to the h1 tag:

document.getElementById("fillname").innerHTML = fillname;

References:

How to get the value from the GET parameters?

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

Michael Wallace
  • 402
  • 3
  • 9
1

Use split to separate and create array

const url = "https://www.example.com/?fillname=John";
const param = url.split('?')[1].split('=');
console.log(`<h1 id="${param[0]}">${param[1]}</h1>`)

Reference: Split

Pedro Henrique
  • 146
  • 4
1
uri = window.location.search.split('=')
if (uri[0] === '?filename'){
document.getElementById('fillname').innerText = uri[1]
}
Ibrahim Sharaf
  • 125
  • 8