JSFiddle - React, Tailwind, and code Playground

HTML

Custo
<input type='text' class='form_campos calc' $input_total id='total_pedido' name='total_pedido' readonly='true' value='5.000,35' id="total_pedido">
<br>
Frete
<input type='text' class='form_campos calc' id='encargos' name='encargos' onkeyup='calcular()'>
<br>
Desconto
<input type='text' class='form_campos calc' id='desconto' name='desconto' onkeyup='calcular()'>
<br>
Total
<input type='text' class='form_campos calc2' id='total_val' name='total_val'>

JavaScript

//É necessário verificar se o campo `total_pedido` já foi renderizado e pode ser referenciado pelo script, por isso é preciso configurar o evento `DOMContentLoaded`.
var total = 0;
document.addEventListener("DOMContentLoaded", function(event) { 
    total = document.getElementById("total_pedido").value;
    total = Number(total.replace(/[.]+/g,"").replace(",","."));
    calcular();
});

function calcular() {
    var encargos = Number(document.getElementById("encargos").value);
    var desconto = Number(document.getElementById("desconto").value);
    var t = total + encargos - desconto;

    document.getElementById("total_val").value = t.toLocaleString('pt-BR')
}