JavaScript: Adding query string to URL based on input fields values, if set?

Question

I have 5 input fields in a form and I would like to add their respective parameters and values, if set, to query string

What I am trying to do is to make it add ? before the first parameter at the end of domain.tld, if there is none, and show the particular parameter with it's value of first input then if other input, add & and next parameter with the value, then & and rest of parameters and values as query string is structured and only add parameters and their values if there is value inserted in their respective inputs by element ID.

In the task it is required to add the query string with parameters and their values, if and only if there is respective input for them. Not sure why it does not work. This would have worked well with PHP's strpos() (already having similar functionality for a redirect elsewhere and it works) and indexOf() in JavaScript is kind of the equivalent of PHP's strpos(), right?. What I tried is provided below.

Somehow I am missing the continuation thinking the **url = url + ** part would suffice. In the end I want to show the URL in a textarea element. Just adding the parameters to URL and show result in texarea for copying on click for use. Already have the click to copy figured out.

function parameterize() {
  var paramter0 = document.getElementById('parameter0').value;
  var parameter1 = document.getElementById('parameter1').value;
  var parameter2 = document.getElementById('parameter2').value;
  var parameter3 = document.getElementById('parameter3').value;
  var parameter4 = document.getElementById('parameter4').value;

  var url = 'https://domain.tld';

  if (paramter0) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'paramter0=' + paramter0;
  }
  if (parameter1) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter1=' + parameter1;
  }
  if (parameter2) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter2=' + parameter2;
  }
  if (parameter3) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter3=' + parameter3;
  }
  if (parameter4) {
    if (indexOf(url, '?') !== false) {
      var symbol_insert = '&';
    } else {
      var symbol_insert = '?';
    }
    url = url + symbol_insert + 'parameter4=' + parameter4;
  }
}
document.getElementById('paramed_url').innerHTML = url;

document.getElementById('add_parameters').addEventListener('click', parameterize);

<div id="parameters" class="panel-collapse collapse">
  <ul class="list-group">
    <li class="list-group-item">
      <label class="parameter">parameter0 0:</label> <input type="text" class="select-selected" id="parameter0" name="parameter0" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 1:</label> <input type="text" class="select-selected" id="parameter1" name="parameter1" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 2:</label> <input type="text" class="select-selected" id="parameter2" name="parameter2" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 3:</label> <input type="text" class="select-selected" id="parameter3" name="parameter3" maxlength="64">
    </li>
    <li class="list-group-item">
      <label class="parameter">parameter 4:</label> <input type="text" class="select-selected" id="parameter4" name="parameter4" maxlength="64">
    </li>
  </ul>
  <button id="add_parameters" name="submit" class="btn btn-primary">
        APPLY
        </button>
</div>

Answer 1

Maybe it's what you want jsFiddle.

document.getElementById('add_parameters').addEventListener('click', parametrize);

function parametrize() {
  let url = 'https://domain.tld';
  let params = {};
  document.querySelectorAll('#parameters input.select-selected').forEach((element) => {
    if (element.value.length > 0)
        params[element.id] = element.value;
  });
  let esc = encodeURIComponent;
  let query = Object.keys(params)
    .map(k => esc(k) + '=' + esc(params[k]))
    .join('&');
  url += '?' + query;
  alert(url);
}