Subtraction between 2 fields

Asked

Viewed 48 times

-1

I am trying to make my Final Total field(Tf) show the result of subtraction of other 2 fields, however I am not knowing how to calculate, someone would tell me how I do it?

	<script>
		function calcular() {
 			 var g1 = parseInt(document.getElementById('g1').value);
  			 var g2 = parseInt(document.getElementById('g2').value);
			  document.getElementById('gresult').innerHTML = g1 + g2;
			  document.getElementById('tg').innerHTML = g1 + g2;
			 var d1 = parseInt(document.getElementById('d1').value);
  			 var d2 = parseInt(document.getElementById('d2').value);
  			  document.getElementById('dresult').innerHTML = d1 + d2;
			  document.getElementById('td').innerHTML = d1 + d2;
			 var tg = parseInt(document.getElementById('tg').value);
			 var td = parseInt(document.getElementById('td').value);
			  document.getElementById('tf').innerHTML = tg - td;
			}
		</script>
<body>
		<h1> Fluxo de caixa </h1>

		<table border=1>
		<tr bgcolor="lightgreen">
			<th colspan = "3"> Ganhos (G) </th>
		</tr>
		<tr>
			<th> Data </th>
			<th> Descrição </th>
			<th> Valor </th>
		</tr>
		<tr>
			<td><input type = "date"></td>
			<td><input type = "text"></td>
			<td><input type = "text" id="g1" value=""></td>
		</tr>
		<tr>
			<td><input type = "date"></td>
			<td><input type = "text"></td>
			<td><input type = "text" id="g2" value="" onblur="calcular()"></td>
		</tr>
		<tr>
			<th colspan = "2" bgcolor="lightgreen"> Total </th>
			<td id="gresult"><input></td>
		</tr>
		</table>
<br><br><br><br>
		<table border=1>
		<tr bgcolor="red">
			<th colspan = "3"> Despesas (D) </th>
		</tr>
		<tr>
			<th> Data </th>
			<th> Descrição </th>
			<th> Valor </th>
		</tr>
		<tr>
			<td><input type = "date"></td>
			<td><input type = "text"></td>
			<td><input type = "text" id="d1" value=""></td>
		</tr>
		<tr>
			<td><input type = "date"></td>
			<td><input type = "text"></td>
			<td><input type = "text" id="d2" value="" onblur="calcular()"></td>
		</tr>
		<tr>
			<th colspan = "2" bgcolor="red"> Total </th>
			<td id="dresult"><input></td>
		</tr>
		</table>
<br><br><br><br>
		<table border=1>
		<tr>
			<th colspan = "2" bgcolor="lightblue"> Resumo </th>
		</tr>
		<tr>
			<td bgcolor="lightgreen"> Ganhos (G) </td>
			<td id="tg"><input type = "text"></td>
		</tr>
		<tr>
			<td bgcolor="red"> Despesas (D) </td>
			<td id="td"><input type = "text" onblur="calcular()"></td>
		</tr>
		<tr>
			<td bgcolor="lightblue"> Total Final </td>
			<td id="tf"><input></td>
		</tr>
		</table>
	</body

javascript

2 answers

0


The id="Tg" is in the tag td and not in the tag input. But it’s better to do the variable calculation instead of the innerHTML calculation.

Follow the corrected code: 

function calcular() {
      var g1 = parseInt(document.getElementById('g1').value);
      var g2 = parseInt(document.getElementById('g2').value);
      var tg = g1 + g2;
      document.getElementById('gresult').innerHTML = tg;
      document.getElementById('tg').innerHTML = tg;
      var d1 = parseInt(document.getElementById('d1').value);
      var d2 = parseInt(document.getElementById('d2').value);
      var td = d1 + d2;
      document.getElementById('dresult').innerHTML = td;
      document.getElementById('td').innerHTML = td;
      document.getElementById('tf').innerHTML = tg - td;
 }

Other tips:

  1. Give more explanatory names for variables and Ids;
  2. Utilise const instead of var for variables that will not change value;
  3. Separate each feature into a function. Example: calculator, calculator, etc...

I’d be like this with the changes:

function calcular() {
       const ganhos = calcularGanhos();
       const despesas = calcularDespesas();

       document.getElementById('gresult').innerHTML = ganhos;
       document.getElementById('tg').innerHTML = ganhos;

       document.getElementById('dresult').innerHTML = despesas;
       document.getElementById('td').innerHTML = despesas;

       document.getElementById('tf').innerHTML = ganhos - despesas;
}

function calcularGanhos() {
  const ganhos = [
    +document.getElementById('g1').value,
    +document.getElementById('g2').value,
  ];
  return somatorio(ganhos);
}

function calcularDespesas() {
  const despesas = [
    +document.getElementById('d1').value,
    +document.getElementById('d2').value,
  ];
  return somatorio(despesas);
}

function somatorio(valores) {
  return valores.reduce((acumulador, valorCorrente) => acumulador + valorCorrente);
}

What can be seen in this code:

  1. In this way each method has the responsibility to do each thing;
  2. The + is an abbreviation of parseint;
  3. With more readable variables you can know what each one is doing;
  4. With the reduce, it is possible to add more than two values, if more;
  5. This code can decrease further with the help of frameworks or Javascript libraries.

0

The problem is you’re trying to capture the value of tg and td, which are elements of the <td>, that is to say, HTMLTableCellElement.

This class does not have value, note that you use it yourself document.getElementById('tg').innerHTML = g1 + g2 to assign the result to that cell, you are assigning the result to the property innerHTML, nay value.

Then you could reclaim that value through the property innerHTML:

var tg = parseInt(document.getElementById('tg').innerHTML);
var td = parseInt(document.getElementById('td').innerHTML);
document.getElementById('tf').innerHTML = tg - td;

But in my opinion you don’t have to do this, you already have the values of g1, g2, d1 and d2, rather than query your document, and parse these html, it would be much more sensible to use the values you already have at hand:

function calcular() {
    var g1 = parseInt(document.getElementById('g1').value);
    var g2 = parseInt(document.getElementById('g2').value);
    document.getElementById('gresult').innerHTML = g1 + g2;
    document.getElementById('tg').innerHTML = g1 + g2;

    var d1 = parseInt(document.getElementById('d1').value);
    var d2 = parseInt(document.getElementById('d2').value);
    document.getElementById('dresult').innerHTML = d1 + d2;
    document.getElementById('td').innerHTML = d1 + d2;

    document.getElementById('tf').innerHTML = (g1 + g2) - (d1 + d2);
}

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.