Calculation with comma in Javascript

Question

Calculation with comma in Javascript

Navigation

#1 by (1 votes)

1

I am redoing an agricultural benchmarking system and am finding it difficult to perform some calculations, I first prepared input´s to receive only números , then formatted them to receive a vírgula and a decimal place when receiving values, so far everything works. When trying to perform a sum and then the average one of my function is accusing error. I'll try not to complicate by posting the commented code.

This is my form:

<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>

Function to allow only numbers:

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

Enter a comma and a decimal place

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);
		}
	}
}

Before doing the sum and calculating the average I call a function that replaces the comma by point, this function is failing, what I try to do is this:

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;

}

The substituiVirgula function and the one that is reporting error, as can be seen here:

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)

The function is this:

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

javascript

asked by anonymous 16.05.2017 / 19:57

1 answer

Team table with 8 variables Redirect with htaccess

score 1 · Accepted Answer

It was a set of small errors, but the main thing is that the calMediaAfericao() function that was called in onfocus of the last field is the one who ended up returning the error valor.indexOf is not a function because you converted the values using parseInt (which should be parseFloat since it is a decimal value) and passed to function substituiVirgula a value of numeric type, where the indexOf method does not exist.

I have a few caveats about the way you chose to call the calculation method, because I think a button for it was more interesting functionally, but changing just to stay functional for your purpose would look like this:

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>