JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<form>
Erste Variable
<input type="text" id="var1" value="1416092306"/>
<br />
Zweite Variable
<select type="text" id="var2" />
  <option value="" selected></option>
  <option value="places-visited">places-visited</option>
  <option value="places-liked">places-liked</option>
  <option value="photos-liked">photos-liked</option>
</select>
<br />
Dritte Variable
<input type="text" id="var3" value="100000262513657"/>
<br />
Vierte Variable
<select type="text" id="var4" />
  <option value="" selected></option>
  <option value="places-visited">places-visited</option>
  <option value="places-liked">places-liked</option>
  <option value="photos-liked">photos-liked</option>
  <option value="pages-liked/interest/pages">Lebt in</option>
</select>
<br />
<input type="radio" name="var5" value="1"/>
<br />
<input type="radio" name="var5" value="2"/>
<br />
<br />
<input type="button" id="URLGenerate" value="Generate" />
</form>

<a href="" id="link" target="_blank"><button>Link</button></a>

JavaScript

//assign the button event handler
document.getElementById( 'URLGenerate' ).addEventListener( 'click', onGenerate );
function getRadioButtonValue ( name ) {
  var allRadios = document.getElementsByName( name );
  for ( var i = 0; i < allRadios.length; i++ ) {
    if ( allRadios[i].checked ) {
      return allRadios[ i ].value;
    }
  }
  return '';//or any other value when nothing is selected
}

function onGenerate() {
  var url = 'https://www.facebook.com/search/';
  var params = [];
  params.push( '/' + document.getElementById( 'var1' ).value );
  params.push( '/' + document.getElementById( 'var2' ).value );
  params.push( '/' + document.getElementById( 'var3' ).value );
  params.push( '/' + document.getElementById( 'var4' ).value );
  params.push( '/' + getRadioButtonValue( 'var5' ) );
  params.push( '/intersect');
  //join all the parameters together and add to the url
  url += '' + params.join( '' );
  document.getElementById("link").href = url;
}