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!

Answer 1

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>.