How can I get URL parameters to change my html text dynamically

Question

I'm trying to get some dynamic text working on a landing page I've built with leadpages. Im no javascript wizard so please bear over with me.

I would like to get the URL parameter ?salon=NameOfSalon so I can automatically change the text accordingly and when empty some default text.

Here is what I got so far

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var salon = getParameterByName('salon');

document.getElementById('salon').innerText = getParameterByName('salon');

But it only changes it in one place, not all of them and there is no default text when empty (I've used <span id="salon"></span>)

Hope it makes sense!

IDs are supposed to be unique. If you have multiple elements to process, use a `class` instead, and loop over them (with a `for` loop for example) — blex, Jun 01 '21 at 19:58
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) — cbender, Jun 01 '21 at 20:08
@cbender I've looked at it and my knowledge on this is sadly so limited that I can't figure out how to use their examples. But thanks for the link and appreciate your answer. — Daniel, Jun 01 '21 at 21:16

Myk Willis · Accepted Answer · 2021-06-01T21:35:59.917

2

The id property should be unique for each HTML element. If you'd like to apply the new innerText to multiple elements, try assigning each element a known class, and then using getElementsByClassName to get references to them all.

e.g.,

var elements = document.getElementsByClassName('salon-class');
for (var element of elements) {
  element.innerText = getParameterByName('salon') || ''
}

This assumes your HTML defines elements like: <span class="salon-class"></span>.

edited Jun 01 '21 at 21:35

answered Jun 01 '21 at 20:01

Myk Willis

12,306
4
45
62

I've tried to insert your code here `function getParameterByName(name, url = window.location.href) { name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^]*)|&|#|$)'), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } var elements = document.getElementsByClassName('salon-class') for (var element of elements) { element.innerText = getParamterByName('salon') || '' }` But can't get it to work. I'm not strong in js - sorry – Daniel Jun 01 '21 at 21:30
I see that there had been a typo in my answer ("getParamterByName" vs "getParameterByName") that was copied into your code. If continue to have problems after fixing that, we'd have to see what error message(s) you are receiving. – Myk Willis Jun 01 '21 at 21:37
That fixed it - Thanks a lot! Is there somewhere I can insert a default text? If someone follows the link without having a URL parameter? – Daniel Jun 01 '21 at 21:41
You can supply default text with the `|| ''` trick I added in there; just replace the `''` with your default value. – Myk Willis Jun 01 '21 at 22:06

How can I get URL parameters to change my html text dynamically

1 Answers1