4

Estava testando um script para calcular juros e percebi que meu código não funciona no Google Chrome, mas se eu abrir o mesmo script no Mozilla ele funciona perfeitamente.

O que será que pode ser?

    elementsArray = document.querySelectorAll('input');
    elementsArray.forEach(function(elem) {
        elem.addEventListener("input", function() {
            calcula();
        });
    });

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

        venc_array = vencimento.split("/");
        vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];

        pagt_array = pagamento.split("/");
        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 style="position:relative; height:200px;  float:left;  width:360px;">
    <legend>Calcular Juros</legend>

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

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

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

    <label>Outras Despesas: </label>
    <input id="despesas" type="text" class="form-control" /><br />
    <br />

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

    <label>Juros: </label>
    <input id="juros" type="text" class="form-control" disabled/><br />

    <label>Valor Total a Pagar: </label>
    <input id="valortotal" type="text" class="form-control" disabled/>
</fieldset>

Google Chrome

inserir a descrição da imagem aqui

Mozilla
inserir a descrição da imagem aqui

3
  • Removi minha resposta pelo seguinte motivo: Ao fazer o teste no meu Notebook usando o navegador Chromium, o código não funcionou, mas ao testar no Google Chrome o mesmo funcionou, informando a data atual como vencimento e a data do pagamento 10 dias após, com o valor de R$ 500 obteve o valor do juros R$ 8,33 esta certo ?
    – NoobSaibot
    16/10/2017 às 22:26
  • Está sim, o script é pra calcular juros de boletos atrasados. 17/10/2017 às 10:00
  • @SmokeRohden expliquei porque seu código não funciona em ambos os browsers e troquei o titulo da sua pergunta para ficar um pouco mais ampla atingindo mais leitores.
    – Marconi
    17/10/2017 às 10:54

2 Respostas 2

7

Porque seu código funciona no Chrome?

O type='date' não é suportado pelo Firefox.

Nessa parte do código ambos os navegadores irão gerar resultados diferentes.

 venc_array = vencimento.split("/");
 vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];

 pagt_array = pagamento.split("/");
 pagamento = pagt_array[2] + "-" + pagt_array[1] + "-" + pagt_array[0];

O Google Crome entende o type=date então valor retornado será Ano-Mês-Dia. Split em Ano-Mês-Dia não irá separar por nada, então a concatenação do resultado será undefined + undefined + valor. Por isso seu código não funciona.

O Mozila Firefox retornará Dia/Mês/Ano resultando em um calculo correto.

Troque o type='date' para type='text' e o código funcionará em ambos os navegadores.

How to get HTML 5 input type=“date” working in Firefox and/or IE 10

O type=date não é uma especificação real neste momento. É um conceito que o Google veio e está em suas especificações(não oficial) e é parcialmente suportado pelo Chrome.

O autor da resposta diz:

Eu não confiaria nesse tipo de entrada neste momento. Seria bom ter, mas não prevejo que este realmente o faça. O motivo n.° 1 é que coloca muito carga no navegador para determinar a melhor interface do usuário para uma entrada um pouco complicada. Pense nisso de uma perspectiva responsiva, como todos os fornecedores saberiam o que funcionará melhor com a sua IU, com 400 pixels, 800 pixels e 1200 pixels de largura?

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

    venc_array = vencimento.split("/");
    vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];

    pagt_array = pagamento.split("/");
    pagamento = pagt_array[2] + "-" + pagt_array[1] + "-" + pagt_array[0];

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

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

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

    var 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 style="position:relative; height:200px;  float:left;  width:360px;">
    <legend>Calcular Juros</legend>

    <label>Data de Vencimento:</label>
    <input id="datavenc" type="text" class="form-control" />
    <br />

    <label>Data de Pagamento: </label>
    <input id="datapag" type="text" class="form-control" />
    <br />

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

    <label>Outras Despesas: </label>
    <input id="despesas" type="text" class="form-control" />
    <br />
    <br />
    <button onclick='calcula()'>Calcula</button>
    <label>Dias em Atraso: </label>
    <input id="diasematraso" type="text" class="form-control" disabled/>
    <br />

    <label>Juros: </label>
    <input id="juros" type="text" class="form-control" disabled/>
    <br />

    <label>Valor Total a Pagar: </label>
    <input id="valortotal" type="text" class="form-control" disabled/>
</fieldset>

1

ATUALIZAÇÃO

Para aumentar a compatibilidade com os navegadores, troque as linhas (o IE não suporta forEach):

elementsArray = document.querySelectorAll('input');
elementsArray.forEach(function(elem) {
   elem.addEventListener("input", function() {
     calcula();
   });
});

Por:

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

Você pode checar se o navegador não tem suporte ao type="date" e criar a data de forma diferente. Basta checar apenas pelo primeiro input com o type="date":

if(document.getElementById("datavenc").type !== "date"){
    // para o Firefox e IE que não suportam 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];
}

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"){
		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 style="position:relative; height:200px;  float:left;  width:360px;">
   <legend>Calcular Juros</legend>

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

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

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

   <label>Outras Despesas: </label>
   <input id="despesas" type="text" class="form-control"/><br />
   <br />

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

   <label>Juros: </label>
   <input id="juros" type="text" class="form-control" disabled/><br />

   <label>Valor Total a Pagar: </label>
   <input id="valortotal" type="text" class="form-control" disabled/>
</fieldset>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .