Calculating interest with javascript

Question

Calculating interest with javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)

4

I'm having a hard time putting together a script, I'm not sure how to calculate date interpolation with javascript, I was thinking of doing a screen that calculates interest, but returns real-time values on inputs that are disabled

follow code:

<fieldset>
   <legend>Calcular Juros</legend>

   <label>Data de Vencimento:</label>
   <input id="datavenc" type="date"/><br />

   <label>Data de Pagamento: </label>
   <input id="datapag" type="date"/><br />

   <label>Valor do Titulo: </label>
   <input id="valortitulo" type="text"/><br />

   <label>Outras Despesas: </label>
   <input id="despesas" type="text"/><br /><br />

   <label>Dias em Atraso: </label>
   <input id="diasematraso" type="text" disabled/><br />

   <label>Juros: </label>
   <input id="juros" type="text" disabled/><br />

   <label>Valor Total a Pagar: </label>
   <input id="valortotal" type="text" disabled/><br />
</fieldset>

For example, maturity date = 01/09/2017
payment date = 09/30/2017
value of the title = 2000
other expenses = 100

overdue days = 29
interest = 96.67
total amount payable = 2,196.67

Overdue days = due date - payment date
Interest = (title value * 5%) / 30 * days overdue
Other expenditure = expenditure
Amount to be paid = value of title + interest + expenses

javascript html

asked by anonymous 30.09.2017 / 15:48

2 answers

1

The calculations you indicate are relatively simple, you just have to save the values in variables or constants and use them in the following operations, once they are chained.

In my example I used Array Destructuring to simplify the search of the elements to the form through their ids and < in> Arrow Functions for click , which you can change if you are working with legacy browsers.

const [dataVenc, dataPag, valorTitulo, despesas, diasEmAtraso, juros, valorTotal, calcular] = 
document.querySelectorAll("#datavenc, #datapag, #valortitulo, #despesas, #diasematraso, #juros, #valortotal, #calcular");

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

  const diasAtraso = (new Date(dataPag.value).getTime() - new Date(dataVenc.value).getTime()) / (1000 * 3600 * 24);
  
  const vTit = Number(valorTitulo.value);
  let jurosCalculados = 0;
  
  if (diasAtraso > 0){ //apenas calcula juros quando há dias em atraso
    diasEmAtraso.value = diasAtraso;
    jurosCalculados = (vTit * 0.05) / 30 * diasAtraso;
  }
  else { //se não tem dias em atraso os juros continuam a 0
    diasEmAtraso.value = 0;
  }
  
  juros.value = jurosCalculados.toFixed(2);
  valorTotal.value = (vTit + jurosCalculados + Number(despesas.value)).toFixed(2);
});

<form>
  <fieldset>
     <legend>Calcular Juros</legend>

     <label>Data de Vencimento:</label>
     <input id="datavenc" type="date"/><br />

     <label>Data de Pagamento: </label>
     <input id="datavenc" type="date"/><br />

     <label>Valor do Titulo: </label>
     <input id="valortitulo" type="text"/><br />

     <label>Outras Despesas: </label>
     <input id="despesas" type="text"/><br /><br />

     <label>Dias em Atraso: </label>
     <input id="diasematraso" type="text" disabled/><br />

     <label>Juros: </label>
     <input id="juros" type="text" disabled/><br />

     <label>Valor Total a Pagar: </label>
     <input id="valortotal" type="text" disabled/><br />
  </fieldset>
</form>
<button id="calcular">Calcular</button>

Although I did not indicate, I assumed that only interest was calculated if the payment date was greater than the due date.

30.09.2017 / 16:36

JS variable returning NaN Add matching information that is in different arrays in the same array

score 1 · Accepted Answer

Solution that automatically updates values when any field changes as it is populated in real time :

elementsArray = document.getElementsByTagName('input');
for(x=0;x<elementsArray.length;x++){
	elementsArray[x].addEventListener("input", function(){
		calcula();
	});
}

function calcula(){
	vencimento = document.getElementById("datavenc").value;
	pagamento = document.getElementById("datapag").value;

	if(document.getElementById("datavenc").type !== "date"){
		// para o Firefox que não suporta type="date"
		venc_array = vencimento.split("/");
		pagt_array = pagamento.split("/");
		vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];
		pagamento = pagt_array[2] + "-" + pagt_array[1] + "-" + pagt_array[0];
	}

	d1 = new Date(vencimento);
	d2 = new Date(pagamento);

	dias_atraso = parseInt((d2 - d1) / (24 * 3600 * 1000));

	valortit = parseFloat(document.getElementById("valortitulo").value);
	outrasdesp = document.getElementById("despesas").value;
	outrasdesp = (outrasdesp == "") ? 0 : parseFloat(outrasdesp);

	juros = ((valortit * .05) / 30) * (dias_atraso);

	if (!isNaN(dias_atraso) && !isNaN(juros)) {
		document.getElementById("diasematraso").value = dias_atraso;
		document.getElementById("juros").value = juros.toFixed(2).replace(".", ",");
		document.getElementById("valortotal").value = (valortit + juros + outrasdesp).toFixed(2).replace(".", ",");
	}
}

<fieldset>
   <legend>Calcular Juros</legend>

   <label>Data de Vencimento:</label>
   <input id="datavenc" type="date"/><br />

   <label>Data de Pagamento: </label>
   <input id="datapag" type="date"/><br />

   <label>Valor do Titulo: </label>
   <input id="valortitulo" type="text"/><br />

   <label>Outras Despesas: </label>
   <input id="despesas" type="text"/><br /><br />

   <label>Dias em Atraso: </label>
   <input id="diasematraso" type="text" disabled/><br />

   <label>Juros: </label>
   <input id="juros" type="text" disabled/><br />

   <label>Valor Total a Pagar: </label>
   <input id="valortotal" type="text" disabled/><br />
</fieldset>