Bringing data from the query string into in-page content

Question

The challenge I'm trying to overcome is to write a webpage that takes values from the URL query string and calls these values onto the webpage.

As an example, I want to produce the numbers 1,2,3,4,5, but I'm only capturing numbers 2,3,4 in the query string. My initial thought was to call IDs, but I haven't found a way that doesn't use IDs in separate paragraphs or header tags.

The only way I could think of doing it was to use document.write to contain them all within the same paragraph, but I've hit a roadblock in that my query strings are not passing through, here's some example code:

URL: example.com/index.html?characterTwo=2?characterThree=3?characterFour=4

<script>
< sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}
</script>
<script>
function myFunction() {
<!--capture the string and set as variable-->
  var 2 = getUrlParameter('characterTwo');
  var 3 = getUrlParameter('characterThree');
  var 4 = getUrlParameter('characterFour');
<!--define the variable as an ID-->
  document.getElementById("2").innerHTML = 2;
  document.getElementById("3").innerHTML = 3;
  document.getElementById("4").innerHTML = 4;
  x.appendChild(t);
  document.body.appendChild(x);
}
<!--print the result as a single paragraph with preceding and proceeding characters-->
  document.write("1");
  document.write(id="2");
  document.write(id="3");
  document.write(id="4");
  document.write("5");
</script>

score 0 · Answer 1 · answered Oct 14 '20 at 07:41

Based on this, you could try:

var urlParams;

getUrlParams();
myFunction();

function getUrlParams() {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
};

function myFunction() {
//capture the string and set as variable
  var val2 = urlParams['characterTwo'];
  var val3 = urlParams['characterThree'];
  var val4 = urlParams['characterFour'];
  console.log(val2)
//define the variable as an ID
  document.getElementById("2").innerHTML = val2;
  document.getElementById("3").innerHTML = val3;
  document.getElementById("4").innerHTML = val4;
  x.appendChild(t);
  document.body.appendChild(x);
}
  
//print the result as a single paragraph with preceding and proceeding characters
  document.write("1");
  document.write(id="2");
  document.write(id="3");
  document.write(id="4");
  document.write("5");

The function getUrlParams sets urlParams as an object containing the query string parameters from the current URL. Note that the query parameters should be separated by &, not ? (e.g. example.com/index.html?characterTwo=2&characterThree=3&characterFour=4).

Bringing data from the query string into in-page content

1 Answers1