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
– blex, Commented Jun 1, 2021 at 19:58
Does this answer your question? How can I get query string values in JavaScript? — cbender
– cbender, Commented Jun 1, 2021 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
– Daniel, Commented Jun 1, 2021 at 21:16

Myk Willis · Accepted Answer · 2021-06-01 21:35:59Z

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 1, 2021 at 21:35

answered Jun 1, 2021 at 20:01

Myk Willis

12.9k5 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Over a year ago

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

Myk Willis Over a year ago

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.

Daniel Over a year ago

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?

Myk Willis Over a year ago

You can supply default text with the || '' trick I added in there; just replace the '' with your default value.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related