1

Estou refazendo um sistema de Aferição Agrícola e estou encontrando uma dificuldade para realizar alguns cálculos, inicialmente preparei os input´s para receberem somente números, em seguida formatei os mesmos para receberem uma vírgula e uma casa decimal ao receberem valores, até ai tudo funciona. Ao tentar realizar um soma e depois a média uma das minhas função está acusando erro. Vou tentar não complicar postando o código comentado.

Esse é o meu formulário:

<div class="row">
   <section class="col col-2">
      <label class="input">
      <input type="text" name="deterVal1" id="deterVal1" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onKeyUp="FormataValor(this,5,event)">
      </label>
   </section>
   <section class="col col-2">
      <label class="input">
      <input type="text" name="deterVal2" id="deterVal2" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onKeyUp="FormataValor(this,5,event)">
      </label>
   </section>
   <section class="col col-2">
      <label class="input">
      <input type="text" name="deterVal3" id="deterVal3" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onKeyUp="FormataValor(this,5,event)">
      </label>
   </section>
   <section class="col col-2">
      <label class="input">
      <input type="text" name="deterVal4" id="deterVal4" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onKeyUp="FormataValor(this,5,event)">
      </label>
   </section>
   <section class="col col-2">
      <label class="input">
      <input type="text" name="deterVal5" id="deterVal5" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onKeyUp="FormataValor(this,5,event)">
      </label>
   </section>
   <section class="col col-2">
      <label class="input">
      <input type="text" name="MediaFinal" id="MediaFinal" value="" class="form-control " onfocus="calMediaAfericao(this)" onKeyPress="SomenteNumeros(this)" onKeyUp="FormataValor(this,5,event)">
      </label>
   </section>
</div>

Função para permitir somente números:

function SomenteNumeros(input) {
	if ((event.keyCode < 48) || (event.keyCode > 57))
		event.returnValue = false;
}

Inserir a vírgula e uma casa decimal

function FormataValor(campo, tammax, teclapres) {

	var tecla = teclapres.keyCode;
	var vr = campo.value;
	vr = vr.replace("/", "");
	vr = vr.replace("/", "");
	vr = vr.replace(",", "");
	vr = vr.replace(".", "");
	vr = vr.replace(".", "");
	vr = vr.replace(".", "");
	vr = vr.replace(".", "");
	tam = vr.length;

	if (tam < tammax && tecla != 8) {
		tam = vr.length + 1;
	}

	if (tecla == 8) {
		tam = tam - 1;
	}

	if (tecla == 8 || (tecla >= 48 && tecla <= 57) || (tecla >= 96 && tecla <= 105)) {
		if (tam <= 1) {
			campo.value = vr;
		}
		tam = tam - 1;
		if ((tam > 1) && (tam <= 5)) {
			campo.value = vr.substr(0, tam - 1) + ',' + vr.substr(tam - 1, tam);
		}

		if ((tam > 5) && (tam <= 8)) {
			campo.value = vr.substr(0, tam - 1) + ',' + vr.substr(tam - 1, tam);
		}
	}
}

Antes de fazer a soma e calcular a média chamo uma função que substitui a vírgula por ponto, essa função está acusando uma falha, o que tento fazer é isso:

function calMediaAfericao() {

	var vlrDet1 = parseInt(document.getElementById('deterVal1').value, 10);
	var vlrDet2 = parseInt(document.getElementById('deterVal2').value, 10);
	var vlrDet3 = parseInt(document.getElementById('deterVal3').value, 10);
	var vlrDet4 = parseInt(document.getElementById('deterVal4').value, 10);
	var vlrDet5 = parseInt(document.getElementById('deterVal5').value, 10);

	vlrDet1 = Number(substituiVirgula(vlrDet1));
	vlrDet2 = Number(substituiVirgula(vlrDet1));
	vlrDet3 = Number(substituiVirgula(vlrDet1));
	vlrDet4 = Number(substituiVirgula(vlrDet1));
	vlrDet5 = Number(substituiVirgula(vlrDet1));

	document.getElementById('MediaFinal').value = (vlrDet1 + vlrDet2 + vlrDet3 + vlrDet4 + vlrDet5) / 5;

}

A função substituiVirgula e a que está acusando erro, como pode ser visto aqui:

VM11866:284 Uncaught TypeError: valor.indexOf is not a function
    at substituiVirgula (eval at globalEval (jquery.min.js:2), <anonymous>:284:13)
    at calMediaAfericao (eval at globalEval (jquery.min.js:2), <anonymous>:338:20)
    at HTMLInputElement.onfocus (VM11873 iAfericaoAgricola-novo.php:1)

A função é essa:

	function substituiVirgula(valor){
		if (valor.indexOf(",") >= 0) {
			var novoValor = valor.replace(",",".");
			return novoValor;
		} else {
			return valor;
		}				
	}

7
  • 1
    O problema é que tem algum valor que não é uma String. Antes da linha if (valor.indexOf(",") >= 0) { coloque um valor = valor.toString();
    – Sorack
    Commented 16/05/2017 às 18:00
  • 2
    Talvez você queira usar uma biblioteca para formatação de números, como o Inputmask - isso evitaria muita dor de cabeça. Além disso A sua função de formatação tem repetições e o código para permitir somente números é facilmente burlável. Commented 16/05/2017 às 18:07
  • 1
    @adventistapr, uma dica, inserir vários trechos de código executável não ajuda a simular nada da sua dúvida, pois os trechos são executados isoladamente. Na próxima vez coloque tudo em apenas um trecho de código, como fiz na minha resposta abaixo.
    – Marco
    Commented 16/05/2017 às 18:51
  • Olá @Marco, foi na preocupação de não faltar argumentos para o bom entendimento, mas agradeço a dica. Commented 16/05/2017 às 19:07
  • 1
    Se possível aproveita a dica do @Renan e tente utilizar o Inputmask, já que eu vi que você utiliza jQuery, vai facilitar e aperfeiçoar bastante a validação dos campos.
    – Marco
    Commented 16/05/2017 às 19:12

1 Resposta 1

1

Foi um conjunto de pequenos erros, mas o principal é que a função calMediaAfericao() que era chamado no onfocus do último campo é quem acabava retornando o erro valor.indexOf is not a function pois você convertia os valores utilizando parseInt (que deveria ser parseFloat já que é um valor decimal) e passava pra função substituiVirgula um valor de tipo numérico, onde não existe o método indexOf.

Tenho algumas ressalvas quanto a maneira que você escolheu para chamar o método de cálculo, pois creio que um botão para isso fosse mais interessante funcionalmente, porém alterando apenas para ficar funcional para o seu objetivo, ficaria assim:

function SomenteNumeros(input) {
  if ((event.keyCode < 48) || (event.keyCode > 57))
    event.returnValue = false;
}

function FormataValor(campo, tammax, teclapres) {
  var tecla = teclapres.keyCode;
  var vr = campo.value;
  vr = vr.replace("/", "");
  vr = vr.replace("/", "");
  vr = vr.replace(",", "");
  vr = vr.replace(".", "");
  vr = vr.replace(".", "");
  vr = vr.replace(".", "");
  vr = vr.replace(".", "");
  tam = vr.length;

  if (tam < tammax && tecla != 8) {
    tam = vr.length + 1;
  }

  if (tecla == 8) {
    tam = tam - 1;
  }

  if (tecla == 8 || (tecla >= 48 && tecla <= 57) || (tecla >= 96 && tecla <= 105)) {
    if (tam <= 1) {
      campo.value = vr;
    }
    tam = tam - 1;
    if ((tam > 1) && (tam <= 5)) {
      campo.value = vr.substr(0, tam - 1) + ',' + vr.substr(tam - 1, tam);
    }

    if ((tam > 5) && (tam <= 8)) {
      campo.value = vr.substr(0, tam - 1) + ',' + vr.substr(tam - 1, tam);
    }
  }
}

function calMediaAfericao(campo) {
  var vlrDet1 = parseFloat(substituiVirgula(document.getElementById('deterVal1').value), 10);
  var vlrDet2 = parseFloat(substituiVirgula(document.getElementById('deterVal2').value), 10);
  var vlrDet3 = parseFloat(substituiVirgula(document.getElementById('deterVal3').value), 10);
  var vlrDet4 = parseFloat(substituiVirgula(document.getElementById('deterVal4').value), 10);
  var vlrDet5 = parseFloat(substituiVirgula(document.getElementById('deterVal5').value), 10);

  campo.value = (vlrDet1 + vlrDet2 + vlrDet3 + vlrDet4 + vlrDet5) / 5;
}

function substituiVirgula(valor) {
  if (valor.indexOf(",") >= 0) {
    var novoValor = valor.replace(",", ".");
    return novoValor;
  } else {
    return valor;
  }
}
<div class="row">
  <section class="col col-2">
    <label class="input">
      <input type="text" name="deterVal1" id="deterVal1" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onkeyup="FormataValor(this,5,event)">
    </label>
  </section>
  <section class="col col-2">
    <label class="input">
      <input type="text" name="deterVal2" id="deterVal2" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onkeyup="FormataValor(this,5,event)">
    </label>
  </section>
  <section class="col col-2">
    <label class="input">
      <input type="text" name="deterVal3" id="deterVal3" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onkeyup="FormataValor(this,5,event)">
    </label>
  </section>
  <section class="col col-2">
    <label class="input">
      <input type="text" name="deterVal4" id="deterVal4" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onkeyup="FormataValor(this,5,event)">
    </label>
  </section>
  <section class="col col-2">
    <label class="input">
      <input type="text" name="deterVal5" id="deterVal5" value="" class="form-control" onKeyPress="SomenteNumeros(this)" onkeyup="FormataValor(this,5,event)">
    </label>
  </section>
  <section class="col col-2">
    <label class="input">
      <input type="text" name="MediaFinal" id="MediaFinal" value="" class="form-control " onfocus="calMediaAfericao(this)" readonly />
    </label>
  </section>
</div>

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 .