You can use eval and automatic mapping by ids (no need to call getElementById) to have that implementation

doAction.addEventListener("click", () => {

  const formula = f1.value
    .replaceAll("v1", v1.value || 0)
    .replaceAll("v2", v2.value || 0)
    .replaceAll("v3", v3.value || 0)
    .replaceAll("v4", v4.value || 0)
  result.innerHTML = eval(formula)
})

<p>
  V1: <input id="v1" />
</p>
<p>
  V2: <input id="v2" />
</p>
<p>
  V3: <input id="v3" />
</p>
<p>
  V4: <input id="v4" />
</p>
<p>
  Formula: <input id="f1" />
</p>
<p id="result">

</p>
<p>
  <button id="doAction">
    Calculate
  </button>
</p>

But one thing you need to be aware of, eval is not safe 100%, if you don't protect your code properly, somebody may inject malicious scripts. Here is the sample case

eval("alert('Not safe')")

If you want to have a safer way, you need to have a function to convert strings to operators with numbers like this

Finally I found this solution:

var doAction = document.getElementById('doAction');

doAction.addEventListener('click', (s, e) => {  
  var scope=expressionArray("(v1+v2)*v3-v4");
  var formula = document.getElementById('f1').value;
  const result = math.evaluate(formula, scope)
  console.log(result);
});
function expressionArray(init)
{
    var text="";
  var split_var = init.split(/[*-/+()]+/);
  var obj={};
  split_var.forEach((s,e)=>{    
    if(document.getElementById(s))
    {
        obj[s]=document.getElementById(s).value;
    }    
  });
  return obj;
}

https://jsfiddle.net/bshafiei/zyv7bsfd/51/