как записать в ссылку 2 переменные? [требует правки]

function toUrl(strs, ...vals) { 
  return String.raw({ raw: strs }, ...vals.map(encodeURIComponent)) 
} 
 
document.forms.url.addEventListener('input', function () { 
  document.querySelector('a').href = toUrl `//example.com?a=${this.a.value}&b=${this.b.value}` 
})

a:after { content: attr(href); white-space: nowrap; }

<form name=url><input name=a> <input name=b></form><br><a></a>

let demo = document.getElementById('Demo'); 
let input_field = document.getElementById('Input_field'); 
let link = document.getElementById('Link'); 
let link_attr = link.getAttribute('href'); 
console.log(input_field.value) 
input_field.addEventListener('input', function(){ 
	let text = link_attr + input_field.value  
	link.setAttribute('href', text); 
	demo.innerText =  'Ссылка у тега <a> теперь такая: ' + text; 
})

* { 
  box-sizing: border-box; 
} 
 
.wrapper { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column; 
  width: 300px; 
  height: 400px; 
  padding: 20px; 
  margin: 30px auto; 
  border: 1px solid #c0c0c0; 
} 
.wrapper input { 
  margin-bottom: 20px; 
}

<div class="wrapper"> 
	<input id="Input_field" type="text" /> 
	<div id="Demo"> 
 
	</div> 
	<a id="Link" href="test.php?sub=%s&limit="></a> 
</div>