Asignandole IDs a los dos inputs y al anchor:
<a id="milink" href='https://www.stackoverflow.com'>Visitar página</a>
<form action="">
parte 1 link: <input id="complemento1" type="text" name="Complemento del link 1">
<br>
<br>
parte 2 link: <input id="complemento2" type="text" name="Complemento del link 2">
</form>
podemos correr el siguiente script:
<script>
const milink = document.getElementById("milink");
const complemento1 = document.getElementById("complemento1");
const complemento2 = document.getElementById("complemento2");
const urlOriginal = milink.getAttribute("href");
let primerComplemento = "";
let segundoComplemento = "";
complemento1.addEventListener("input", configurarVariables);
complemento2.addEventListener("input", configurarVariables);
function configurarVariables(e) {
const valor = this.value;
const id = this.getAttribute("id");
cambiarTexto(valor, id)
}
function cambiarTexto(texto, complemento) {
if (complemento === 'complemento1') {
primerComplemento = texto;
const nuevaUrl = `${urlOriginal}/${primerComplemento}/${segundoComplemento}`;
milink.setAttribute("href", nuevaUrl);
} else {
segundoComplemento = texto;
const nuevaUrl = `${urlOriginal}/${primerComplemento}/${segundoComplemento}`;
milink.setAttribute("href", nuevaUrl);
}
}
</script>
Lo que el script anterior hace:
milink, complemento1 y complemento2 son constantes que representan los elementos html con los respectivos ids.
urlOriginal es el valor del href del anchor.
primerComplemento y segundoComplemento son variables que guardarán el estado de las variables.
complemento1 y complemento2 tendrán event listeners que llamarán a la función configurarVariables
configurarVariables obtendrá el valor del input y el id a travez de la función this.
luego se pasarán a otra función llamada cambiarTexto que verificará cuál es el complemento que al que se le está haciendo el cambio, luego cambiará el valor correspondiente en primerComplemento o segundoComplemento, para finalmente cambiar el valor final de la url con una template literal que es básicamente concatenación de strings(valor1 + valor2 + valorn) pero en es6