JavaScript - use link parameter to create text in the H1 tag of another page

Question

JavaScript - use link parameter to create text in the H1 tag of another page

463 views Asked by user2005514 At 08 June 2015 at 23:20

In this example I have two pages - 1 product page, and 1 conversion page.

On the product page I will have a link that points to the conversion page. On this link I would like to pass the product name via a parameter. something like this: href = conversionpage.html?productName

On the conversion page I would like use JavaScript to take the product name parameter and populate the h1 tag - so the h1 tag would be something like this < h1 >productName< /h1 >

Make sense? I have no idea how to do this.

Thank you in advance for your help. I have 100,000 + product pages this example was just to simplify the issue.

Original Q&A

There are 2 answers

**colecmc** · Answer 1 · 2015-06-08 23:42:55

Here is what I think you want to do.

Get the URL search parameters, then take the one you need and place it in the innerHTML of the desired tag.

Loops = function(collection, fn) {
  'use strict';
  var i;

  if ((collection.item && collection.length) || collection instanceof Array || collection instanceof Element || collection.elements || collection.jquery) {
    i = collection.length;

    if (i > -1) {
      do {
        if (collection[i] !== undefined) {
          fn(i);
        }
      } while (--i >= 0);
    }
    return this;
  } else {
    throw new Error('"collection" (' + collection + ') is not valid. It should be an array or have an "item" method and a "length" property');
  }
};



GetURLParameters = function(keys) {
  'use strict';

  var pair, arr, query, parameters, queryString;

  if (location.search) {
    query = location.search.substring(1);
    parameters = query.split("&");
    queryString = {};
  }

  function createObject(key, val, i) {
    pair = parameters[i].split("=");

    if (typeof queryString[pair[key]] === "undefined") {
      queryString[pair[key]] = decodeURI(pair[val]);
    } else if (typeof queryString[pair[key]] === "string") {
      arr = [queryString[pair[key]], pair[val]];
      queryString[pair[key]] = arr;
    } else {
      queryString[pair[key]].push(pair[val]);
    }
  }

  if (parameters && keys === 1) {
    Loops(parameters, function(i) {
      createObject(1, 0, i);
    });
  } else if (parameters) {
    Loops(parameters, function(i) {
      createObject(0, 1, i);
    });
  }

  return queryString;
};

/** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/



var params = GetURLParameters();
console.log(params);
document.getElementById('h1').innerHTML = params['parameter-name'];

<h1 id="h1"></h1>

**tylerlindell** · Answer 2 · 2015-06-08 23:53:25

with a url of http://example.com?productName=Walkman

<body>
    <h1 id="productName"></h1>
</body>


<script type='text/javascript'>
    // start by creating a function 
    function loadUp(){
        var str = window.location.search.replace(/(?:(\D+=))/ig, "") //get the search parameters from the url and remove everything before the "=" sign
        document.getElementById('productName').innerHTML = str //assign that string to the "innerHTML" of the h1 tag that has an id of "productName"
    };

    window.onload = loadUp; // once the page has loaded, fire off that function
</script>

this script will do this once the document has been loaded:

<body>
    <h1 id="productName">Walkman</h1>
</body>

TechQA.

JavaScript - use link parameter to create text in the H1 tag of another page

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in PARAMETERS

Popular Questions

Popular Tags

Trending Questions