JSFiddle - React, Tailwind, and code Playground
HTML
<table width="30%" border="0">
<tr>
<td width="30%" align="center" valign="center" bgcolor="#EEEEE0"> <font color="#8B8B83" face="arial"><b> - Estimativa de Carga Térmica - </b></font>
</td>
</tr>
</table>
<br>
<table width="30%">
<tr>
<td width="30%">
<form method="post" action "">
<fieldset>
<legend></legend>
<table width="100%" border="0">
<tr>
<td width="50%" align="right" valign="center"> <b>Volume ( m³): </b>
</td>
<td width="50%" align="center" valign="center">
<input type="text" name="volume" id="valor1" size="5" />
</td>
</tr>
<tr>
<td width="50%" align="right" valign="center"> <b>Nº de Pessoas: </b>
</td>
<td width="50%" align="center" valign="center">
<input type="text" name="pessoa" id="valor2" size="5" />
</td>
</tr>
<tr>
<td width="50%" align="center" valign="center">
<br>
<br>
</td>
<td width="50%" align="center" valign="center">
<input type="text" name="resultado" id="valor3" hidden/>
<input type="submit" value="Calcular Carga Térmica" class="btn" />
</td>
</tr>
</table>
</fieldset>
<br>
<div class="resultado">
<h2>RELATÓRIO</h2>
<div...
CSS
.resultado {
font-weight: 600;
}
.resultado span {
color: blue;
}
JavaScript
function somarValores() {
var s1 = document.getElementById("valor1").value;
var valor1 = convToFloat(s1) * 0.50;
var s2 = document.getElementById("valor2").value;
var valor2 = convToFloat(s2) * 12;
return [valor1, valor2];
}
function convToFloat(temp) {
if (temp.indexOf(',') == -1) temp = temp.replace(",", ".");
return parseFloat(temp);
}
$(document).ready(function () {
$(".btn").click(function (e) {
e.preventDefault();
var input = somarValores();
$('#n1 span').text(input[0]);
$('#n2 span').text(input[1]);
$('#n3 span').text(input[0] + input[1]);
});
})