JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <label for="primeiro-valor">Primeiro valor</label>
  <input name="primeiro-valor" id="primeiro-valor"/>
</div>
<div>
  <label for="segundo-valor">Segundo valor</label>
  <input name="segundo-valor" id="segundo-valor" />
</div>
<div>
  <label for="resultado">Resultado</label>
  <input name="resultado" id="resultado" />  
</div>

JavaScript

var primeiroValor = document.querySelector("#primeiro-valor");
var segundoValor = document.querySelector("#segundo-valor");
var campoResultado = document.querySelector("#resultado");

function calcular(primeiroValor, segundoValor){
	var valor1 = parseFloat(primeiroValor.value) || 0;
  var valor2 = parseFloat(segundoValor.value) || 0;
	return valor1 + valor2;
}

function evtCalcular(){
	var resultado = calcular(primeiroValor, segundoValor);
  
  campoResultado.value = resultado;
}

primeiroValor.addEventListener('blur', evtCalcular);
segundoValor.addEventListener('blur', evtCalcular);